React Swatch Picker.Api

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 type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';

// @public
export const ColorSwatch: ForwardRefComponent<ColorSwatchProps>;

// @public (undocumented)
export const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots>;

// @public
export type ColorSwatchProps = ComponentProps<ColorSwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'> & {
    borderColor?: string;
    color: string;
    disabled?: boolean;
    value: string;
};

// @public (undocumented)
export type ColorSwatchSlots = {
    root: NonNullable<Slot<'button'>>;
    icon?: Slot<'span'>;
    disabledIcon?: Slot<'span'>;
};

// @public
export type ColorSwatchState = ComponentState<ColorSwatchSlots> & Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {
    selected: boolean;
};

// @public
export const EmptySwatch: ForwardRefComponent<EmptySwatchProps>;

// @public (undocumented)
export const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots>;

// @public
export type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;

// @public (undocumented)
export type EmptySwatchSlots = {
    root: Slot<'button'>;
};

// @public
export type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;

// @public
export const ImageSwatch: ForwardRefComponent<ImageSwatchProps>;

// @public (undocumented)
export const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots>;

// @public
export type ImageSwatchProps = ComponentProps<ImageSwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'> & {
    src: string;
    value: string;
};

// @public (undocumented)
export type ImageSwatchSlots = {
    root: Slot<'button'>;
};

// @public
export type ImageSwatchState = ComponentState<ImageSwatchSlots> & Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {
    selected: boolean;
};

// @public
export const renderColorSwatch_unstable: (state: ColorSwatchState) => JSXElement;

// @public
export const renderEmptySwatch_unstable: (state: EmptySwatchState) => JSXElement;

// @public
export const renderImageSwatch_unstable: (state: ImageSwatchState) => JSXElement;

// @public
export const renderSwatchPicker_unstable: (state: SwatchPickerState, contextValues: SwatchPickerContextValues) => JSXElement;

// @public (undocumented)
export const renderSwatchPickerGrid: (props: SwatchPickerGridProps) => JSXElement[];

// @public
export const renderSwatchPickerRow_unstable: (state: SwatchPickerRowState) => JSXElement;

// @public (undocumented)
export const swatchCSSVars: {
    color: string;
    borderColor: string;
};

// @public
export const SwatchPicker: ForwardRefComponent<SwatchPickerProps>;

// @public (undocumented)
export const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots>;

// @public (undocumented)
export const swatchPickerContextDefaultValue: SwatchPickerContextValue;

// @public
export type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {
    isGrid: boolean;
    requestSelectionChange: (event: React_2.MouseEvent<HTMLButtonElement>, data: {
        selectedValue: string;
        selectedSwatch: string;
    }) => void;
};

// @public (undocumented)
export type SwatchPickerContextValues = {
    swatchPicker: SwatchPickerContextValue;
};

// @public (undocumented)
export type SwatchPickerGridProps = {
    items: SwatchProps[];
    columnCount: number;
    renderRow?: (props: {
        children: JSXElement[];
        rowId: string | number;
    }) => JSXElement;
    renderSwatch?: (item: SwatchProps) => JSXElement;
};

// @public (undocumented)
export type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;

// @public (undocumented)
export type SwatchPickerOnSelectionChangeData = EventData<'click', React_2.MouseEvent<HTMLButtonElement>> & {
    selectedValue: string;
    selectedSwatch: string;
};

// @public
export type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {
    defaultSelectedValue?: string;
    focusMode?: 'arrow' | 'tab';
    layout?: 'row' | 'grid';
    onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;
    selectedValue?: string;
    size?: 'extra-small' | 'small' | 'medium' | 'large';
    shape?: 'rounded' | 'square' | 'circular';
    spacing?: 'small' | 'medium';
};

// @public (undocumented)
export const SwatchPickerProvider: React_2.Provider<SwatchPickerContextValue> & React_2.FC<React_2.ProviderProps<SwatchPickerContextValue>>;

// @public
export const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps>;

// @public (undocumented)
export const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots>;

// @public
export type SwatchPickerRowProps = ComponentProps<SwatchPickerRowSlots>;

// @public (undocumented)
export type SwatchPickerRowSlots = {
    root: Slot<'div'>;
};

// @public
export type SwatchPickerRowState = ComponentState<SwatchPickerRowSlots> & Pick<SwatchPickerProps, 'spacing'>;

// @public (undocumented)
export type SwatchPickerSlots = {
    root: Slot<'div'>;
};

// @public
export type SwatchPickerState = ComponentState<SwatchPickerSlots> & SwatchPickerContextValue & Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {
    isGrid: boolean;
};

// @public (undocumented)
export type SwatchProps = ImageSwatchProps | ColorSwatchProps;

// @public
export const useColorSwatch_unstable: (props: ColorSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ColorSwatchState;

// @public
export const useColorSwatchStyles_unstable: (state: ColorSwatchState) => ColorSwatchState;

// @public
export const useEmptySwatch_unstable: (props: EmptySwatchProps, ref: React_2.Ref<HTMLButtonElement>) => EmptySwatchState;

// @public
export const useEmptySwatchStyles_unstable: (state: EmptySwatchState) => EmptySwatchState;

// @public
export const useImageSwatch_unstable: (props: ImageSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ImageSwatchState;

// @public
export const useImageSwatchStyles_unstable: (state: ImageSwatchState) => ImageSwatchState;

// @public
export const useSwatchPicker_unstable: (props: SwatchPickerProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerState;

// @public (undocumented)
export const useSwatchPickerContextValue_unstable: <T>(selector: ContextSelector<SwatchPickerContextValue, T>) => T;

// @public (undocumented)
export const useSwatchPickerContextValues: (state: SwatchPickerState) => SwatchPickerContextValues;

// @public
export const useSwatchPickerRow_unstable: (props: SwatchPickerRowProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerRowState;

// @public
export const useSwatchPickerRowStyles_unstable: (state: SwatchPickerRowState) => SwatchPickerRowState;

// @public
export const useSwatchPickerStyles_unstable: (state: SwatchPickerState) => SwatchPickerState;

// (No @packageDocumentation comment for this package)