Developers
Start building
Themes/Theme SDK/Modules/ui/Types: PopoverProps to RovingTabsOptions

Types: PopoverProps to RovingTabsOptions

The types of @poltura/theme-sdk/ui, PopoverProps to RovingTabsOptions.

On this page
import { … } from '@poltura/theme-sdk/ui';

PopoverProps

Props of Popover.

openboolean

Whether it is open, when you hold that state.

defaultOpenboolean

Whether it starts open, when it holds that state itself.

onOpenChange(open: boolean) => void

Called with the new state when the shopper opens or closes it.

childrenReactNode

Its {@link PopoverTrigger} and {@link PopoverContent}.

PopoverTriggerProps

Props of PopoverTrigger.

asChildboolean

Makes its one child, such as your own `<button>`, the trigger instead of a button around it.

PopoverContentProps

Props of PopoverContent.

align'start' | 'center' | 'end'

Which edge of the button it lines up with; defaults to `center`.

sideOffsetnumber

The gap from the button in pixels; defaults to 8.

collisionPaddingnumber

The least room it keeps from the window's edges, in pixels; defaults to 0.

SeparatorProps

Props of Separator.

orientation'horizontal' | 'vertical'

The direction of the line; defaults to `horizontal`.

decorativeboolean

Hides the line from assistive technology when it is only decoration; defaults to true.

SkeletonProps

Props of Skeleton.

type SkeletonProps = HTMLAttributes<HTMLDivElement>

CarouselOptions

The options a Carousel accepts.

loopboolean

Wraps from the last slide back to the first.

align'start' | 'center' | 'end'

Where the active slide rests in the viewport.

dragFreeboolean

Lets a drag glide freely instead of snapping to a slide.

slidesToScrollnumber | 'auto'

How many slides one step moves, or `auto` for as many as fit.

startIndexnumber

The slide shown first, from 0.

skipSnapsboolean

Lets a fast drag skip slides.

durationnumber

The duration of the scroll animation; higher is slower.

CarouselApi

The carousel's controller, for reading which slide shows and moving between slides.

type CarouselApi = {
    scrollPrev: () => void;
    scrollNext: () => void;
    scrollTo: (index: number, jump?: boolean) => void;
    canScrollPrev: () => boolean;
    canScrollNext: () => boolean;
    selectedScrollSnap: () => number;
    scrollSnapList: () => number[];
    on: (event: 'select' | 'reInit', callback: () => void) => void;
    off: (event: 'select' | 'reInit', callback: () => void) => void;
} | undefined

CarouselProps

Props of Carousel.

optsCarouselOptions

Scroll behaviour of the slides.

orientation'horizontal' | 'vertical'

The direction slides move in; defaults to `horizontal`.

setApi(api: CarouselApi) => void

Receives the controller once the carousel is ready.

CarouselContentProps

Props of CarouselContent.

type CarouselContentProps = HTMLAttributes<HTMLDivElement>

CarouselItemProps

Props of CarouselItem.

type CarouselItemProps = HTMLAttributes<HTMLDivElement>

CarouselPreviousProps

Props of CarouselPrevious.

type CarouselPreviousProps = ComponentPropsWithoutRef<'button'> & {
    variant?: ButtonProps['variant'];
    size?: ButtonProps['size'];
}

CarouselNextProps

Props of CarouselNext.

type CarouselNextProps = ComponentPropsWithoutRef<'button'> & {
    variant?: ButtonProps['variant'];
    size?: ButtonProps['size'];
}

InlineErrorProps

Props of InlineError.

messagestring | null

The error text; nothing is drawn while it is empty.

classNamestring

Classes added to the message.

IconProps

Props of Icon.

valuerequiredIconValue

An `icon` setting's value.

labelstring

The accessible name; leave it out for a decorative icon, which is hidden from screen readers.

classNamestring

Size and colour classes; the icon is `size-5` and takes the text colour by default.

TooltipProps

Props of Tooltip.

contentrequiredstring

The text shown in the tooltip.

childrenrequiredReactElement

The single element that shows the tooltip on hover and focus.

PageLinksProps

Props of PageLinks.

pagerequirednumber

The current page, from 1.

pageCountrequirednumber

How many pages there are; nothing is drawn for one page or fewer.

hrefrequired(page: number) => string

The path of a page, such as `/blog?page=2`.

classNamestring

Classes added to the navigation.

ClassFlag

A flag in an object of flags: its class name applies while the flag is truthy.

type ClassFlag = string | number | bigint | boolean | null | undefined

ClassValue

Anything cn turns into class names: strings, numbers, nested arrays and objects of flags.

type ClassValue = ClassFlag | {
    readonly [className: string]: ClassFlag;
} | ClassValue[]

InViewOptions

Options of useInView.

thresholdnumber

How much of the element must show, from 0 to 1, to count as in view.

rootMarginstring

A margin around the viewport, written like CSS margins.

onceboolean

Stays in view for good once seen; defaults to true.

InView

What useInView returns.

refrequiredRefObject<HTMLDivElement | null>

Attach it to the element to watch.

inViewrequiredboolean

Whether the element is in view; true until an off-screen element is measured.

SnapCarouselOptions

Options of useSnapCarousel.

autoplayrequiredboolean

Moves to the next slide on its own until the visitor touches the track or a control.

intervalMsrequirednumber

The time between automatic moves, in milliseconds.

SnapCarousel

What useSnapCarousel returns.

trackRefrequiredRefObject<HTMLDivElement | null>

Attach it to the scrolling element whose direct children are the slides.

activeIndexrequirednumber

The index of the slide nearest the start of the track.

goTorequired(index: number) => void

Scrolls to a slide by its index and stops autoplay.

autoplayingrequiredboolean

Whether the track is moving on its own right now.

RovingTab

One tab of a tablist that useRovingTabs moves focus between.

type RovingTab<Id extends string = string>
idrequiredId

The tab's id.

RovingTabsOptions

Options of useRovingTabs.

type RovingTabsOptions<Id extends string>
tabsrequiredreadonly RovingTab<Id>[]

The tabs in order.

onSelectrequired(id: Id) => void

Called with the id of the tab that arrow, Home or End keys select.

tabDomIdrequired(id: Id) => string

The DOM id rendered on a tab's button, which the handler uses to focus it.

Last updated