packages/react-components/react-carousel/library/etc/react-carousel.api.md
Do not edit this file. It is a report generated by API Extractor.
import { ARIAButtonElement } from '@fluentui/react-aria';
import { ARIAButtonSlotProps } from '@fluentui/react-aria';
import { ButtonProps } from '@fluentui/react-button';
import { ButtonSlots } from '@fluentui/react-button';
import { ButtonState } from '@fluentui/react-button';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import { ContextSelector } from '@fluentui/react-context-selector';
import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import { FC } from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import { Provider } from 'react';
import { ProviderProps } from 'react';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { ToggleButtonProps } from '@fluentui/react-button';
import { ToggleButtonState } from '@fluentui/react-button';
import { TooltipProps } from '@fluentui/react-tooltip';
// @public
export const Carousel: ForwardRefComponent<CarouselProps>;
// @public
export type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;
// @public (undocumented)
export type CarouselAppearance = 'flat' | 'elevated';
// @public
export const CarouselAutoplayButton: ForwardRefComponent<CarouselAutoplayButtonProps>;
// @public (undocumented)
export const carouselAutoplayButtonClassNames: SlotClassNames<CarouselAutoplayButtonSlots>;
// @public
export type CarouselAutoplayButtonProps = ToggleButtonProps & ComponentProps<CarouselAutoplayButtonSlots> & {
onCheckedChange?: EventHandler<CarouselAutoplayChangeData>;
};
// @public (undocumented)
export type CarouselAutoplayButtonSlots = ButtonSlots & {
root: NonNullable<Slot<ARIAButtonSlotProps>>;
};
// @public
export type CarouselAutoplayButtonState = ToggleButtonState & ComponentState<CarouselAutoplayButtonSlots>;
// @public
export const CarouselButton: ForwardRefComponent<CarouselButtonProps>;
// @public (undocumented)
export const carouselButtonClassNames: SlotClassNames<CarouselButtonSlots>;
// @public
export type CarouselButtonProps = Partial<ButtonProps> & ComponentProps<CarouselButtonSlots> & {
navType?: 'prev' | 'next';
};
// @public (undocumented)
export type CarouselButtonSlots = ButtonSlots & {
root: NonNullable<Slot<ARIAButtonSlotProps>>;
};
// @public
export type CarouselButtonState = ButtonState & ComponentState<CarouselButtonSlots> & Required<Pick<CarouselButtonProps, 'navType'>>;
// @public
export const CarouselCard: ForwardRefComponent<CarouselCardProps>;
// @public (undocumented)
export const carouselCardClassNames: SlotClassNames<CarouselCardSlots>;
// @public
export type CarouselCardProps = ComponentProps<CarouselCardSlots> & {
autoSize?: boolean;
};
// @public (undocumented)
export type CarouselCardSlots = {
root: Slot<'div'>;
};
// @public
export type CarouselCardState = ComponentState<CarouselCardSlots> & Pick<CarouselCardProps, 'autoSize'>;
// @public (undocumented)
export const carouselClassNames: SlotClassNames<CarouselSlots>;
// @public (undocumented)
export const carouselContextDefaultValue: CarouselContextValue;
// @public (undocumented)
export type CarouselContextValue = {
activeIndex: number;
appearance?: CarouselAppearance;
circular: boolean;
selectPageByElement: (event: React_2.FocusEvent, element: HTMLElement, jump?: boolean) => number;
selectPageByDirection: (event: React_2.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, direction: 'next' | 'prev') => number;
selectPageByIndex: (event: React_2.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, value: number, jump?: boolean) => void;
subscribeForValues: (listener: (data: CarouselUpdateData) => void) => () => void;
enableAutoplay: (autoplay: boolean, temporary?: boolean) => void;
resetAutoplay: () => void;
containerRef?: React_2.RefObject<HTMLDivElement | null>;
viewportRef?: React_2.RefObject<HTMLDivElement | null>;
};
// @public
export type CarouselContextValues = {
carousel: CarouselContextValue;
};
// @public (undocumented)
export type CarouselIndexChangeData = (EventData<'click', React_2.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> | EventData<'focus', React_2.FocusEvent> | EventData<'drag', PointerEvent | MouseEvent> | EventData<'autoplay', Event>) & {
index: number;
};
// @public
export const CarouselNav: ForwardRefComponent<CarouselNavProps>;
// @public
export const CarouselNavButton: ForwardRefComponent<CarouselNavButtonProps>;
// @public (undocumented)
export const carouselNavButtonClassNames: SlotClassNames<CarouselNavButtonSlots>;
// @public
export type CarouselNavButtonProps = ComponentProps<CarouselNavButtonSlots> & {};
// @public (undocumented)
export type CarouselNavButtonSlots = {
root: NonNullable<Slot<ARIAButtonSlotProps>>;
};
// @public
export type CarouselNavButtonState = ComponentState<CarouselNavButtonSlots> & {
selected?: boolean;
} & Pick<CarouselNavState, 'appearance'>;
// @public (undocumented)
export const carouselNavClassNames: SlotClassNames<CarouselNavSlots>;
// @public
export const CarouselNavContainer: ForwardRefComponent<CarouselNavContainerProps>;
// @public (undocumented)
export const carouselNavContainerClassNames: SlotClassNames<CarouselNavContainerSlots>;
// @public
export type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {
layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';
};
// @public (undocumented)
export type CarouselNavContainerSlots = {
root: Slot<'div'>;
next?: Slot<CarouselButtonProps>;
nextTooltip?: Slot<TooltipProps>;
prev?: Slot<CarouselButtonProps>;
prevTooltip?: Slot<TooltipProps>;
autoplay?: Slot<typeof CarouselAutoplayButton>;
autoplayTooltip?: Slot<TooltipProps>;
};
// @public
export type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> & Pick<CarouselNavContainerProps, 'layout'>;
// @public
export const CarouselNavImageButton: ForwardRefComponent<CarouselNavImageButtonProps>;
// @public (undocumented)
export const carouselNavImageButtonClassNames: SlotClassNames<CarouselNavImageButtonSlots>;
// @public
export type CarouselNavImageButtonProps = ComponentProps<CarouselNavImageButtonSlots> & {};
// @public (undocumented)
export type CarouselNavImageButtonSlots = {
root: NonNullable<Slot<ARIAButtonSlotProps>>;
image: NonNullable<Slot<'img'>>;
};
// @public
export type CarouselNavImageButtonState = ComponentState<CarouselNavImageButtonSlots> & {
selected?: boolean;
};
// @public (undocumented)
export type CarouselNavProps = Omit<ComponentProps<Partial<CarouselNavSlots>>, 'children'> & {
children: NavButtonRenderFunction;
} & Partial<Pick<CarouselNavState, 'appearance' | 'totalSlides'>>;
// @public (undocumented)
export type CarouselNavSlots = {
root: NonNullable<Slot<'div'>>;
};
// @public (undocumented)
export type CarouselNavState = ComponentState<CarouselNavSlots> & {
appearance?: 'brand';
renderNavButton: NavButtonRenderFunction;
totalSlides: number;
};
// @public
export type CarouselProps = ComponentProps<CarouselSlots> & {
defaultActiveIndex?: number;
align?: 'center' | 'start' | 'end';
activeIndex?: number;
appearance?: CarouselAppearance;
onActiveIndexChange?: EventHandler<CarouselIndexChangeData>;
circular?: boolean;
groupSize?: number | 'auto';
draggable?: boolean;
whitespace?: boolean;
motion?: CarouselMotion;
announcement?: CarouselAnnouncerFunction;
autoplayInterval?: number;
};
// @public (undocumented)
export const CarouselProvider: Provider<CarouselContextValue | undefined> & FC<ProviderProps<CarouselContextValue | undefined>>;
// @public
export const CarouselSlider: ForwardRefComponent<CarouselSliderProps>;
// @public (undocumented)
export const carouselSliderClassNames: SlotClassNames<CarouselSliderSlots>;
// @public
export type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {
cardFocus?: boolean;
};
// @public (undocumented)
export type CarouselSliderSlots = {
root: Slot<'div'>;
};
// @public
export type CarouselSliderState = ComponentState<CarouselSliderSlots> & CarouselSliderContextValue;
// @public (undocumented)
export type CarouselSlots = {
root: Slot<'div'>;
};
// @public
export type CarouselState = ComponentState<CarouselSlots> & CarouselContextValue;
// @public
export const CarouselViewport: ForwardRefComponent<CarouselViewportProps>;
// @public (undocumented)
export const carouselViewportClassNames: SlotClassNames<CarouselViewportSlots>;
// @public
export type CarouselViewportProps = ComponentProps<CarouselViewportSlots>;
// @public (undocumented)
export type CarouselViewportSlots = {
root: Slot<'div'>;
};
// @public
export type CarouselViewportState = ComponentState<Required<CarouselViewportSlots>> & CarouselSliderContextValue;
// @public (undocumented)
export type NavButtonRenderFunction = (index: number) => React_2.ReactNode;
// @public
export const renderCarousel_unstable: (state: CarouselState, contextValues: CarouselContextValues) => JSXElement;
// @public
export const renderCarouselAutoplayButton_unstable: (state: CarouselAutoplayButtonState) => JSXElement;
// @public
export const renderCarouselButton_unstable: (state: CarouselButtonState) => JSXElement;
// @public
export const renderCarouselCard_unstable: (state: CarouselCardState) => JSXElement;
// @public
export const renderCarouselNav_unstable: (state: CarouselNavState, contextValues: CarouselNavContextValues) => JSXElement;
// @public
export const renderCarouselNavButton_unstable: (state: CarouselNavButtonState) => JSXElement;
// @public
export const renderCarouselNavContainer_unstable: (state: CarouselNavContainerState) => JSXElement;
// @public
export const renderCarouselNavImageButton_unstable: (state: CarouselNavImageButtonState) => JSXElement;
// @public
export const renderCarouselSlider_unstable: (state: CarouselSliderState, contextValues: CarouselSliderContextValues) => JSXElement;
// @public
export const renderCarouselViewport_unstable: (state: CarouselViewportState, contextValues: CarouselSliderContextValues) => JSXElement;
// @public
export function useCarousel_unstable(props: CarouselProps, ref: React_2.Ref<HTMLDivElement>): CarouselState;
// @public
export const useCarouselAutoplayButton_unstable: (props: CarouselAutoplayButtonProps, ref: React_2.Ref<ARIAButtonElement>) => CarouselAutoplayButtonState;
// @public
export const useCarouselAutoplayButtonStyles_unstable: (state: CarouselAutoplayButtonState) => CarouselAutoplayButtonState;
// @public
export const useCarouselButton_unstable: (props: CarouselButtonProps, ref: React_2.Ref<ARIAButtonElement>) => CarouselButtonState;
// @public
export const useCarouselButtonStyles_unstable: (state: CarouselButtonState) => CarouselButtonState;
// @public
export const useCarouselCard_unstable: (props: CarouselCardProps, ref: React_2.Ref<HTMLDivElement>) => CarouselCardState;
// @public
export const useCarouselCardStyles_unstable: (state: CarouselCardState) => CarouselCardState;
// @public (undocumented)
export const useCarouselContext_unstable: <T>(selector: ContextSelector<CarouselContextValue, T>) => T;
// @public
export const useCarouselNav_unstable: (props: CarouselNavProps, ref: React_2.Ref<HTMLDivElement>) => CarouselNavState;
// @public
export const useCarouselNavButton_unstable: (props: CarouselNavButtonProps, ref: React_2.Ref<ARIAButtonElement>) => CarouselNavButtonState;
// @public
export const useCarouselNavButtonStyles_unstable: (state: CarouselNavButtonState) => CarouselNavButtonState;
// @public
export const useCarouselNavContainer_unstable: (props: CarouselNavContainerProps, ref: React_2.Ref<HTMLDivElement>) => CarouselNavContainerState;
// @public
export const useCarouselNavContainerStyles_unstable: (state: CarouselNavContainerState) => CarouselNavContainerState;
// @public
export const useCarouselNavImageButton_unstable: (props: CarouselNavImageButtonProps, ref: React_2.Ref<ARIAButtonElement>) => CarouselNavImageButtonState;
// @public
export const useCarouselNavImageButtonStyles_unstable: (state: CarouselNavImageButtonState) => CarouselNavImageButtonState;
// @public
export const useCarouselNavStyles_unstable: (state: CarouselNavState) => CarouselNavState;
// @public
export const useCarouselSlider_unstable: (props: CarouselSliderProps, ref: React_2.Ref<HTMLDivElement>) => CarouselSliderState;
// @public
export const useCarouselSliderStyles_unstable: (state: CarouselSliderState) => CarouselSliderState;
// @public
export const useCarouselStyles_unstable: (state: CarouselState) => CarouselState;
// @public
export const useCarouselViewport_unstable: (props: CarouselViewportProps, ref: React_2.Ref<HTMLDivElement>) => CarouselViewportState;
// @public
export const useCarouselViewportStyles_unstable: (state: CarouselViewportState) => CarouselViewportState;
// (No @packageDocumentation comment for this package)