Back to Fluentui

React Carousel.Api

packages/react-components/react-carousel/library/etc/react-carousel.api.md

4.40.2-hotfix213.1 KB
Original Source

Do not edit this file. It is a report generated by API Extractor.

ts

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)