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'; /** * Carousel is the context wrapper and container for all carousel content/controls, * it has no direct style or slot opinions. * * Carousel also provides API interfaces for callbacks that will occur on navigation events. */ export declare const Carousel: ForwardRefComponent; /** * Children function replacement, passes through updated context index and carousel information for localization */ export declare type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string; export declare type CarouselAppearance = 'flat' | 'elevated'; /** * If the Carousel is on auto-play, the user may opt into pausing the auto-play feature via the * CarouselAutoplayButton which must be present for auto-play to be enabled. * * If CarouselAutoplayButton is present, auto-play will default to true on mount. */ export declare const CarouselAutoplayButton: ForwardRefComponent; export declare const carouselAutoplayButtonClassNames: SlotClassNames; /** * CarouselAutoplayButton Props */ export declare type CarouselAutoplayButtonProps = ToggleButtonProps & ComponentProps & { /** * Callback that informs the user when internal autoplay value has changed */ onCheckedChange?: EventHandler; }; export declare type CarouselAutoplayButtonSlots = ButtonSlots & { root: NonNullable>; }; /** * State used in rendering CarouselAutoplayButton */ export declare type CarouselAutoplayButtonState = ToggleButtonState & ComponentState; declare type CarouselAutoplayChangeData = EventData<'click', React_2.MouseEvent> & { /** * The updated autoplay value. */ checked: boolean; }; /** * A default navigation button that will set value to the next/previous page, * driven by it's type 'next' or 'previous'. */ export declare const CarouselButton: ForwardRefComponent; export declare const carouselButtonClassNames: SlotClassNames; /** * CarouselButton Props */ export declare type CarouselButtonProps = Partial & ComponentProps & { /** * Dictates whether button will be of type go next or go previous * Default: 'next' */ navType?: 'prev' | 'next'; }; export declare type CarouselButtonSlots = ButtonSlots & { root: NonNullable>; }; /** * State used in rendering CarouselButton */ export declare type CarouselButtonState = ButtonState & ComponentState & Required>; /** * The defining wrapper of a carousel's indexed content, they will take up the full * viewport of CarouselSlider or div wrapper, * users may place multiple items within this Card if desired, with consideration of viewport width. * * Clickable actions within the content area are available via mouse and tab as expected, * non-active card content will be set to inert until moved to active card. */ export declare const CarouselCard: ForwardRefComponent; export declare const carouselCardClassNames: SlotClassNames; /** * CarouselCard Props */ export declare type CarouselCardProps = ComponentProps & { /** * Sets the card styling to be responsive based on content. */ autoSize?: boolean; }; export declare type CarouselCardSlots = { root: Slot<'div'>; }; /** * State used in rendering CarouselCard */ export declare type CarouselCardState = ComponentState & Pick; export declare const carouselClassNames: SlotClassNames; export declare const carouselContextDefaultValue: CarouselContextValue; export declare type CarouselContextValue = { activeIndex: number; appearance?: CarouselAppearance; circular: boolean; selectPageByElement: (event: React_2.FocusEvent, element: HTMLElement, jump?: boolean) => number; selectPageByDirection: (event: React_2.MouseEvent, direction: 'next' | 'prev') => number; selectPageByIndex: (event: React_2.MouseEvent, value: number, jump?: boolean) => void; subscribeForValues: (listener: (data: CarouselUpdateData) => void) => () => void; enableAutoplay: (autoplay: boolean, temporary?: boolean) => void; resetAutoplay: () => void; containerRef?: React_2.RefObject; viewportRef?: React_2.RefObject; }; /** * Context shared between Carousel and its children components */ export declare type CarouselContextValues = { carousel: CarouselContextValue; }; export declare type CarouselIndexChangeData = (EventData<'click', React_2.MouseEvent> | EventData<'focus', React_2.FocusEvent> | EventData<'drag', PointerEvent | MouseEvent> | EventData<'autoplay', Event>) & { /** * The index to be set after event has occurred. */ index: number; }; /** * List of integrated motion types */ declare type CarouselMotion = 'slide' | { kind: 'slide'; duration?: number; } | 'fade'; /** * Used to jump to a card based on index, using arrow navigation via Tabster. * * The children of this component will be wrapped in a context to * provide the appropriate value based on their index position. */ export declare const CarouselNav: ForwardRefComponent; /** * The child element of CarouselNav, a singular button that will set the carousels active value on click. */ export declare const CarouselNavButton: ForwardRefComponent; export declare const carouselNavButtonClassNames: SlotClassNames; /** * CarouselNavButton Props */ export declare type CarouselNavButtonProps = ComponentProps & {}; export declare type CarouselNavButtonSlots = { /** * ARIA compliant nav buttons used to jump to pages */ root: NonNullable>; }; /** * State used in rendering CarouselNavButton */ export declare type CarouselNavButtonState = ComponentState & { /** * Enables selection state control */ selected?: boolean; } & Pick; export declare const carouselNavClassNames: SlotClassNames; /** * CarouselNavContainer component - This container will provide multiple valid layout options for the underlying carousel controls */ export declare const CarouselNavContainer: ForwardRefComponent; export declare const carouselNavContainerClassNames: SlotClassNames; /** * CarouselNavContainer Props */ export declare type CarouselNavContainerProps = ComponentProps & { /** * Default: 'inline' * Defines the nav container layout: * * 'inline' - Default controls inline with carousel view * * inline-wide - Similar to inline but places nav buttons on far left/right * * 'overlay' - Controls overlaid on bottom of carousel viewport, * * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side * * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered */ layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded'; }; export declare type CarouselNavContainerSlots = { root: Slot<'div'>; next?: Slot; nextTooltip?: Slot; prev?: Slot; prevTooltip?: Slot; autoplay?: Slot; autoplayTooltip?: Slot; }; /** * State used in rendering CarouselNavContainer */ export declare type CarouselNavContainerState = ComponentState & Pick; declare type CarouselNavContextValue = Pick; /** * Context shared between CarouselNav and its children components */ declare type CarouselNavContextValues = { carouselNav: CarouselNavContextValue; }; /** * A variant child element of CarouselNav, a singular image button that displays a * preview of card content and will set the carousels active value on click. */ export declare const CarouselNavImageButton: ForwardRefComponent; export declare const carouselNavImageButtonClassNames: SlotClassNames; /** * CarouselNavImageButton Props */ export declare type CarouselNavImageButtonProps = ComponentProps & {}; export declare type CarouselNavImageButtonSlots = { /** * ARIA compliant nav buttons used to jump to pages */ root: NonNullable>; /** * Required: The image within the button */ image: NonNullable>; }; /** * State used in rendering CarouselNavImageButton */ export declare type CarouselNavImageButtonState = ComponentState & { /** * Enables selection state control */ selected?: boolean; }; export declare type CarouselNavProps = Omit>, 'children'> & { children: NavButtonRenderFunction; } & Partial>; export declare type CarouselNavSlots = { /** * The element wrapping the carousel pagination. By default, this is a div. */ root: NonNullable>; }; export declare type CarouselNavState = ComponentState & { /** * Enables an alternate brand style when set to 'brand' */ appearance?: 'brand'; /** * The function that will render nav items based on total slides and their index. */ renderNavButton: NavButtonRenderFunction; /** * The total number of slides available. * Users may override if using the component without a Carousel wrapper or implementing custom functionality. */ totalSlides: number; }; /** * Carousel Props */ export declare type CarouselProps = ComponentProps & { /** * The initial page to display in uncontrolled mode. */ defaultActiveIndex?: number; /** * The alignment of the carousel. */ align?: 'center' | 'start' | 'end'; /** * The value of the currently active page. */ activeIndex?: number; /** * Sets visual treatment for the Carousel container. * * `flat` * Retains the minimal styling used by default prior to introducing appearance-based styles. * * `elevated` * Applies rounded corners, background, and shadow tokens so the Carousel is presented as a surfaced container. * * @default 'flat' */ appearance?: CarouselAppearance; /** * Callback to notify a page change. */ onActiveIndexChange?: EventHandler; /** * Circular enables the carousel to loop back around on navigation past trailing index. */ circular?: boolean; /** * Controls the number of carousel cards per navigation element, will default to 'auto' * Recommended to set to '1' when using full page carousel cards. */ groupSize?: number | 'auto'; /** * Enables drag to scroll on carousel items. * Defaults to: False */ draggable?: boolean; /** * Adds whitespace to start/end so that 'align' prop is always respected for current index * Defaults to: False */ whitespace?: boolean; /** * Sets motion type as either 'slide' or 'fade' * Defaults: 'slide' * * Users can also pass 'slide' & duration via CarouselMotion object to control carousel speed. * Drag interactions are not affected because duration is then determined by the drag force. * * Note: Duration is not in milliseconds because Carousel uses an * attraction physics simulation when scrolling instead of easings. * Only values between 20-60 are recommended, 25 is the default. */ motion?: CarouselMotion; /** * Localizes the string used to announce carousel page changes * Defaults to: undefined */ announcement?: CarouselAnnouncerFunction; /** * Choose a delay between autoplay transitions in milliseconds. * Only active if Autoplay is enabled via CarouselAutoplayButton * * Defaults: 4000 */ autoplayInterval?: number; }; export declare const CarouselProvider: Provider & FC>; /** * CarouselSlider component - The viewport window that CarouselCards are contained within. */ export declare const CarouselSlider: ForwardRefComponent; export declare const carouselSliderClassNames: SlotClassNames; declare type CarouselSliderContextValue = Pick; /** * Context shared between CarouselSlider and its children components */ declare type CarouselSliderContextValues = { carouselSlider: CarouselSliderContextValue; }; /** * CarouselSlider Props */ export declare type CarouselSliderProps = Partial> & { /** * cardFocus sets the carousel slider as a focus group, * enabling left/right navigation of elements. * * This will also be passed into CarouselCards via context and set the appropriate focus attributes * * Defaults: false */ cardFocus?: boolean; }; export declare type CarouselSliderSlots = { /** * The root viewport/window of the carousel */ root: Slot<'div'>; }; /** * State used in rendering CarouselSlider */ export declare type CarouselSliderState = ComponentState & CarouselSliderContextValue; export declare type CarouselSlots = { root: Slot<'div'>; }; /** * State used in rendering Carousel */ export declare type CarouselState = ComponentState & CarouselContextValue; /** * @internal */ declare interface CarouselUpdateData { /** * The current carousel index, a change in index will not trigger the callback (use context index instead). */ activeIndex: number; /** * The total number of slides to be navigated, accounts for grouping. */ navItemsCount: number; /** * A breakdown of the card indexes contained within each slide index. */ groupIndexList: number[][]; /** * An array of the card DOM elements after render */ slideNodes: HTMLElement[]; /** * Whether the carousel has enough cards present to enable looping without issues. */ canLoop?: boolean; } /** * CarouselViewport component - TODO: add more docs */ export declare const CarouselViewport: ForwardRefComponent; export declare const carouselViewportClassNames: SlotClassNames; /** * CarouselViewport Props */ export declare type CarouselViewportProps = ComponentProps; export declare type CarouselViewportSlots = { /** * The viewport outer container, defining the size of the carousels visible and interactable area */ root: Slot<'div'>; }; /** * State used in rendering CarouselViewport */ export declare type CarouselViewportState = ComponentState> & CarouselSliderContextValue; export declare type NavButtonRenderFunction = (index: number) => React_2.ReactNode; /** * Render the final JSX of Carousel */ export declare const renderCarousel_unstable: (state: CarouselState, contextValues: CarouselContextValues) => JSXElement; /** * Render the final JSX of CarouselAutoplayButton */ export declare const renderCarouselAutoplayButton_unstable: (state: CarouselAutoplayButtonState) => JSXElement; /** * Render the final JSX of CarouselButton */ export declare const renderCarouselButton_unstable: (state: CarouselButtonState) => JSXElement; /** * Render the final JSX of CarouselCard */ export declare const renderCarouselCard_unstable: (state: CarouselCardState) => JSXElement; /** * Render the final JSX of CarouselNav */ export declare const renderCarouselNav_unstable: (state: CarouselNavState, contextValues: CarouselNavContextValues) => JSXElement; /** * Render the final JSX of CarouselNavButton */ export declare const renderCarouselNavButton_unstable: (state: CarouselNavButtonState) => JSXElement; /** * Render the final JSX of CarouselNavContainer */ export declare const renderCarouselNavContainer_unstable: (state: CarouselNavContainerState) => JSXElement; /** * Render the final JSX of CarouselNavImageButton */ export declare const renderCarouselNavImageButton_unstable: (state: CarouselNavImageButtonState) => JSXElement; /** * Render the final JSX of CarouselSlider */ export declare const renderCarouselSlider_unstable: (state: CarouselSliderState, contextValues: CarouselSliderContextValues) => JSXElement; /** * Render the final JSX of CarouselViewport */ export declare const renderCarouselViewport_unstable: (state: CarouselViewportState, contextValues: CarouselSliderContextValues) => JSXElement; /** * Create the state required to render Carousel. * * The returned state can be modified with hooks such as useCarouselStyles_unstable, * before being passed to renderCarousel_unstable. * * @param props - props from this instance of Carousel * @param ref - reference to root HTMLDivElement of Carousel */ export declare function useCarousel_unstable(props: CarouselProps, ref: React_2.Ref): CarouselState; /** * Create the state required to render CarouselAutoplayButton. * * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable, * before being passed to renderCarouselAutoplayButton_unstable. * * @param props - props from this instance of CarouselAutoplayButton * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton */ export declare const useCarouselAutoplayButton_unstable: (props: CarouselAutoplayButtonProps, ref: React_2.Ref) => CarouselAutoplayButtonState; /** * Apply styling to the CarouselAutoplayButton slots based on the state */ export declare const useCarouselAutoplayButtonStyles_unstable: (state: CarouselAutoplayButtonState) => CarouselAutoplayButtonState; /** * Create the state required to render CarouselButton. * * The returned state can be modified with hooks such as useCarouselButtonStyles_unstable, * before being passed to renderCarouselButton_unstable. * * @param props - props from this instance of CarouselButton * @param ref - reference to root HTMLDivElement of CarouselButton */ export declare const useCarouselButton_unstable: (props: CarouselButtonProps, ref: React_2.Ref) => CarouselButtonState; /** * Apply styling to the CarouselButton slots based on the state */ export declare const useCarouselButtonStyles_unstable: (state: CarouselButtonState) => CarouselButtonState; /** * Create the state required to render CarouselCard. * * The returned state can be modified with hooks such as useCarouselCardStyles_unstable, * before being passed to renderCarouselCard_unstable. * * @param props - props from this instance of CarouselCard * @param ref - reference to root HTMLDivElement of CarouselCard */ export declare const useCarouselCard_unstable: (props: CarouselCardProps, ref: React_2.Ref) => CarouselCardState; /** * Apply styling to the CarouselCard slots based on the state */ export declare const useCarouselCardStyles_unstable: (state: CarouselCardState) => CarouselCardState; export declare const useCarouselContext_unstable: (selector: ContextSelector) => T; /** * Create the state required to render CarouselNav. * * The returned state can be modified with hooks such as useCarouselNavStyles_unstable, * before being passed to renderCarouselNav_unstable. * * @param props - props from this instance of CarouselNav * @param ref - reference to root HTMLDivElement of CarouselNav */ export declare const useCarouselNav_unstable: (props: CarouselNavProps, ref: React_2.Ref) => CarouselNavState; /** * Create the state required to render CarouselNavButton. * * The returned state can be modified with hooks such as useCarouselNavButtonStyles_unstable, * before being passed to renderCarouselNavButton_unstable. * * @param props - props from this instance of CarouselNavButton * @param ref - reference to root HTMLDivElement of CarouselNavButton */ export declare const useCarouselNavButton_unstable: (props: CarouselNavButtonProps, ref: React_2.Ref) => CarouselNavButtonState; /** * Apply styling to the CarouselNavButton slots based on the state */ export declare const useCarouselNavButtonStyles_unstable: (state: CarouselNavButtonState) => CarouselNavButtonState; /** * Create the state required to render CarouselNavContainer. * * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable, * before being passed to renderCarouselNavContainer_unstable. * * @param props - props from this instance of CarouselNavContainer * @param ref - reference to root HTMLDivElement of CarouselNavContainer */ export declare const useCarouselNavContainer_unstable: (props: CarouselNavContainerProps, ref: React_2.Ref) => CarouselNavContainerState; /** * Apply styling to the CarouselNavContainer slots based on the state */ export declare const useCarouselNavContainerStyles_unstable: (state: CarouselNavContainerState) => CarouselNavContainerState; /** * Create the state required to render CarouselNavImageButton. * * The returned state can be modified with hooks such as useCarouselNavImageButtonStyles_unstable, * before being passed to renderCarouselNavImageButton_unstable. * * @param props - props from this instance of CarouselNavImageButton * @param ref - reference to root HTMLButtonElement | HTMLAnchorElement of CarouselNavImageButton */ export declare const useCarouselNavImageButton_unstable: (props: CarouselNavImageButtonProps, ref: React_2.Ref) => CarouselNavImageButtonState; /** * Apply styling to the CarouselNavImageButton slots based on the state */ export declare const useCarouselNavImageButtonStyles_unstable: (state: CarouselNavImageButtonState) => CarouselNavImageButtonState; /** * Apply styling to the CarouselNav slots based on the state */ export declare const useCarouselNavStyles_unstable: (state: CarouselNavState) => CarouselNavState; /** * Create the state required to render CarouselSlider. * * The returned state can be modified with hooks such as useCarouselSliderStyles_unstable, * before being passed to renderCarouselSlider_unstable. * * @param props - props from this instance of CarouselSlider * @param ref - reference to root HTMLDivElement of CarouselSlider */ export declare const useCarouselSlider_unstable: (props: CarouselSliderProps, ref: React_2.Ref) => CarouselSliderState; /** * Apply styling to the CarouselSlider slots based on the state */ export declare const useCarouselSliderStyles_unstable: (state: CarouselSliderState) => CarouselSliderState; /** * Apply styling to the Carousel slots based on the state */ export declare const useCarouselStyles_unstable: (state: CarouselState) => CarouselState; /** * Create the state required to render CarouselViewport. * * The returned state can be modified with hooks such as useCarouselViewportStyles_unstable, * before being passed to renderCarouselViewport_unstable. * * @param props - props from this instance of CarouselViewport * @param ref - reference to root HTMLDivElement of CarouselViewport */ export declare const useCarouselViewport_unstable: (props: CarouselViewportProps, ref: React_2.Ref) => CarouselViewportState; /** * Apply styling to the CarouselViewport slots based on the state */ export declare const useCarouselViewportStyles_unstable: (state: CarouselViewportState) => CarouselViewportState; export { }