: null} {corner ? : null} {children} ); if (inline) { return (

{inside}

); } return ( {/* The first sheet darkens the page; one opened from it does not add a second shade. */} {sheet.nested ? null : ( { if (sheet.hasOpenChild()) sheet.closeTree(); }} /> )} {/* The popup is portalled out from under the provider, so the context is given again for the parts inside it. */} {inside} ); } SheetContent.displayName = 'Sheet.Content'; export interface SheetHeaderProps extends Omit, 'title'> { /** The heading. In an open sheet it is also what the sheet is announced as. */ title?: ReactNode; /** A line under the heading. */ description?: ReactNode; } /** * The heading block. It leaves room for the close button beside the title, * so the two share the top line instead of stacking. */ function SheetHeader({ title, description, className, children, render, ...props }: SheetHeaderProps & RenderProp<'div'>) { const { showClose } = useSheet('Sheet.Header'); const slots = sheetVariants(); return useRender({ defaultTagName: 'div', render, props: mergeProps( { className: slots.header({ className: [showClose && 'pe-14', className] }), children: ( <> {title !== undefined ? {title} : null} {description !== undefined ? {description} : null} {children} ), }, props ), }); } SheetHeader.displayName = 'Sheet.Header'; export interface SheetTitleProps extends ComponentProps<'h2'> {} /** The sheet's name, announced when it opens. */ function SheetTitle({ className, ...props }: SheetTitleProps) { const { inline } = useSheet('Sheet.Title'); const slots = sheetVariants(); if (inline) return

; return } />; } SheetTitle.displayName = 'Sheet.Title'; export interface SheetDescriptionProps extends ComponentProps<'p'> {} /** A sentence under the title, read out after it. */ function SheetDescription({ className, ...props }: SheetDescriptionProps) { const { inline } = useSheet('Sheet.Description'); const slots = sheetVariants(); if (inline) return
; return } />; } SheetDescription.displayName = 'Sheet.Description'; export interface SheetBodyProps extends ComponentProps<'div'> {} /** * The part that scrolls. The header and footer stay put while it moves, and * the scrollbar is a thin drawn thumb that shows while the content is moving. */ function SheetBody({ className, children, ...props }: SheetBodyProps) { const { inline } = useSheet('Sheet.Body'); const slots = sheetVariants(); const content = ( {children} ); return ( {inline ? content : } ); } SheetBody.displayName = 'Sheet.Body'; export interface SheetFooterProps extends ComponentProps<'div'> {} /** The actions, stacked full width at the bottom of the sheet. */ function SheetFooter({ className, ...props }: SheetFooterProps) { const { inline } = useSheet('Sheet.Footer'); const slots = sheetVariants(); const footer =
; return inline ? footer : ; } SheetFooter.displayName = 'Sheet.Footer'; export interface SheetCloseProps extends ComponentProps<'button'> { /** * Your own element to close the sheet with, such as a Cancel button. * Without it, and without children, this is the round close button, drawn * where it is written in place of the one in the corner. */ render?: ReactElement; /** Draw the round close button. A `Sheet.Close` with nothing inside it already is one. */ icon?: boolean; } const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect; /** * Closes the sheet. Works even when `dismissible` is off. Written bare, it is * the round close button, and the sheet stops drawing its own in the corner. */ function SheetClose({ render, icon = false, children, ...props }: SheetCloseProps) { const sheet = useSheet('Sheet.Close'); const bare = icon || (render === undefined && children === undefined); const { claimClose } = sheet; useIsomorphicLayoutEffect(() => (bare ? claimClose() : undefined), [bare, claimClose]); if (bare) return ; if (sheet.inline) { return ( ); } return ( {children} ); } SheetClose.displayName = 'Sheet.Close'; /** The round button with a cross in it. / function CloseButton({ className, 'aria-label': label = 'Close', ...props }: ComponentProps<'button'>) { const { inline } = useSheet('Sheet.Close'); const slots = sheetVariants(); const glyph = ( ); const shared = { 'data-slot': 'sheet-close', 'aria-label': label, className: slots.close({ className }), ...props }; if (inline) { return ( ); } return {glyph}; } / ----------------------------------------------------------------- slides */ interface SlidesContextValue { snap: boolean; count: number; current: number; choose(index: number): void; /** Set when pressing a slide chooses it. */ pressable: boolean; } const SlidesContext = createContext(null); /** The rounded frame of a slide: the slide itself in a deck, inside its row in a column. */ const frameOf = (slide: HTMLElement) => slide.querySelector('[data-slide-frame]') ?? slide; const SlideIndexContext = createContext(0); function reduceMotion() { return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; } export interface SheetSlidesProps extends Omit, 'onChange'> { /** * `true` makes it a deck: each slide fills the height, and a scroll * glides to the next one. `false` makes it a numbered column of smaller * slides that scrolls freely. Default `true`. */ snap?: boolean; /** The current slide, counted from 0, when the caller holds it. Setting it scrolls that slide into view. */ index?: number; /** The slide to start on, when the caller does not hold it. Default `0`. */ defaultIndex?: number; /** * Called with the new index when the current slide changes: scrolled to * in a deck, pressed in a column. In a column, passing it makes each * slide a button. */ onIndexChange?: (index: number) => void; /** Show "3 / 8" under the current slide. Default: on in a deck. */ counter?: boolean; /** The shape of a slide in a column, as a CSS aspect ratio. Default `16 / 9`. */ aspect?: string; } /** * A column of rounded slides in place of `Sheet.Body`: a deck that moves one * slide at a time, or with `snap={false}`, a numbered column to choose from. / function SheetSlides({ snap = true, index, defaultIndex = 0, onIndexChange, counter, aspect = '16 / 9', className, style, children, 'aria-label': label = 'Slides', ...props }: SheetSlidesProps) { const slots = sheetVariants(); const viewport = useRef(null); const slides = Children.toArray(children); const count = slides.length; const [internal, setInternal] = useState(defaultIndex); const current = Math.min(Math.max(index ?? internal, 0), Math.max(count - 1, 0)); const live = useRef({ current, onIndexChange, controlled: index !== undefined }); live.current = { current, onIndexChange, controlled: index !== undefined }; const slideAt = (at: number) => viewport.current?.querySelectorAll('[data-slot=sheet-slide]')[at] ?? null; // Scrolls the slides alone. `scrollIntoView` would move every scroller // above them too, the page included when a sheet is drawn inline. const reveal = useCallback( (at: number, smooth: boolean) => { const root = viewport.current; const slide = slideAt(at); if (!root || !slide) return; const box = root.getBoundingClientRect(); const frame = frameOf(slide).getBoundingClientRect(); const above = frame.top - box.top; const below = frame.bottom - box.bottom; const by = snap ? above - (box.height - frame.height) / 2 : above < 0 ? above - 8 : below > 0 ? below + 8 : 0; if (by === 0) return; const behavior = smooth && !reduceMotion() ? 'smooth' : 'auto'; if (!snap) { root.scrollBy({ top: by, behavior }); return; } // A deck stops at every slide on the way, which is right for a hand // and wrong for Home or End. Snapping is off for the length of a jump. root.style.scrollSnapType = 'none'; root.scrollBy({ top: by, behavior }); let restored = false; const restore = () => { if (restored) return; restored = true; root.style.scrollSnapType = ''; }; if (behavior === 'smooth' && 'onscrollend' in window) { root.addEventListener('scrollend', restore, { once: true }); window.setTimeout(restore, 1200); } else { requestAnimationFrame(restore); } }, [snap] ); // The slide last brought into view. One that became current by being // scrolled to is already in view, and must not be scrolled to again: that // would pull a deck back to it in the middle of a longer scroll. const shown = useRef(null); const settle = useCallback((next: number) => { shown.current = next; if (next === live.current.current) return; if (!live.current.controlled) setInternal(next); live.current.onIndexChange?.(next); }, []); // A deck's current slide is the one most in view. useEffect(() => { const root = viewport.current; if (!snap || !root || typeof IntersectionObserver === 'undefined') return; const observer = new IntersectionObserver( (entries) => { for (const entry of entries) { if (entry.isIntersecting) settle(Number((entry.target as HTMLElement).dataset.index)); } }, { root, threshold: 0.6 } ); root.querySelectorAll('[data-slot=sheet-slide]').forEach((slide) => observer.observe(slide)); return () => observer.disconnect(); }, [snap, count, settle]); // Opens on the current slide, and follows `index` when it is set from outside. useEffect(() => { const first = shown.current === null; if (!first && shown.current === current) return; shown.current = current; if (first && current === 0) return; const box = viewport.current?.getBoundingClientRect(); const slide = slideAt(current); const frame = slide ? frameOf(slide).getBoundingClientRect() : undefined; const visible = box && frame && frame.top >= box.top - 1 && frame.bottom <= box.bottom + 1; // A deck that scrolled there by itself is already on it. if (!visible || (first && snap)) reveal(current, !first); }, [current, reveal, snap]); const go = (next: number) => { const at = Math.min(Math.max(next, 0), count - 1); if (snap) reveal(at, true); else { settle(at); reveal(at, true); slideAt(at)?.querySelector('button')?.focus(); } }; const goNow = useRef(go); goNow.current = go; / * A wheel or a trackpad turns a deck one slide per gesture. Left to the * browser, a slow scroll drifts part of the way, eases off and springs * back, and a fast one runs past several slides. Here a deliberate scroll * glides to the next slide, and the rest of the same gesture, the * trackpad's momentum included, is absorbed rather than fought. A touch * screen keeps the browser's own snapping, which follows the finger. / useEffect(() => { const root = viewport.current; if (!snap || !root) return; let pending = 0; let lastWheel = 0; let lockedUntil = 0; const onWheel = (event: WheelEvent) => { // Sideways scrolling and pinch-zoom are not turns. if (event.ctrlKey || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return; event.preventDefault(); const now = performance.now(); const gap = now - lastWheel; lastWheel = now; if (now < lockedUntil) { // Still the same gesture: keep it from turning a second slide. lockedUntil = Math.max(lockedUntil, now + 140); return; } if (gap > 200) pending = 0; pending += event.deltaMode === 1 ? event.deltaY 16 : event.deltaY; if (Math.abs(pending) < 24) return; const step = Math.sign(pending); pending = 0; lockedUntil = now + 500; goNow.current(live.current.current + step); }; root.addEventListener('wheel', onWheel, { passive: false }); return () => root.removeEventListener('wheel', onWheel); }, [snap]); const keys = (event: KeyboardEvent) => { const step = event.key === 'ArrowDown' || event.key === 'PageDown' || (event.key === ' ' && !event.shiftKey) ? 1 : event.key === 'ArrowUp' || event.key === 'PageUp' || (event.key === ' ' && event.shiftKey) ? -1 : 0; if (step !== 0) { event.preventDefault(); go(current + step); } else if (event.key === 'Home' || event.key === 'End') { event.preventDefault(); go(event.key === 'Home' ? 0 : count - 1); } }; const context = useMemo( () => ({ snap, count, current, choose: settle, pressable: !snap && onIndexChange !== undefined }), [snap, count, current, settle, onIndexChange] ); return ( {slides.map((slide, at) => ( {slide} ))} {(counter ?? snap) && count > 1 ? ( ) : null} ); } SheetSlides.displayName = 'Sheet.Slides'; export interface SheetSlideProps extends ComponentProps<'div'> { /** * What a screen reader calls it, after its place: "3 of 8, Harbour at * dawn". An image's `alt` usually says it already. */ label?: string; /** Its shape in a column, overriding `Sheet.Slides`' `aspect`. */ aspect?: string; } /** One slide: a rounded frame that fills with an image, a video or anything drawn. */ function SheetSlide({ label, aspect, className, style, children, render, ...props }: SheetSlideProps & RenderProp<'div'>) { const slides = useContext(SlidesContext); if (!slides) throw new Error('Sheet.Slide must be used inside .'); const at = useContext(SlideIndexContext); const slots = sheetVariants(); const place = `${at + 1} of ${slides.count}`; const selected = at === slides.current; const name = label ? `${place}, ${label}` : place; const frameClass = slots.slide({ className: [ slides.snap ? 'h-[calc(100cqh-0.75rem)] snap-center' : // In a column a slide sits on the sheet's own colour, so it takes the // theme's border as a real edge, and a shadow to stand off the sheet. 'aspect-(--slide-aspect) rounded-[14px] shadow-xs ring-1 ring-border transition-shadow duration-150 after:hidden', !slides.snap && !selected && slides.pressable && 'group-hover/slide:ring-foreground/25', // Chosen in a column: a ring in the info colour, the theme's colour for // something switched on, clear of the slide's edge. !slides.snap && selected && 'shadow-none ring-2 ring-[var(--info)] ring-offset-2 ring-offset-popover', className, ], }); const frameStyle = aspect ? { ...style, aspectRatio: aspect } : style; const frame = (
{children}
); // Called before the branch below, so a prop that changes later cannot change the hook count. const rendered = useRender({ defaultTagName: 'div', render, props: mergeProps( { 'data-slot': 'sheet-slide', 'data-index': at, 'data-selected': selected ? '' : undefined, className: slots.slideRow(), children: ( <> {slides.pressable ? ( ) : (
{frame}
)} ), }, props ), }); // In a deck the slide is the frame, so the observer that finds the current // one has a box to watch. if (slides.snap) { return (
{children}
); } return rendered; } SheetSlide.displayName = 'Sheet.Slide'; export interface SheetStageProps extends ComponentProps<'div'> {} /** * Wrap the app — or the part of the page a sheet belongs to — in this, and * the page steps back slightly while a sheet is open. Sheets opened anywhere * inside it take part. */ function SheetStage({ className, children, ...props }: SheetStageProps) { const slots = sheetVariants(); return (
{children}
); } SheetStage.displayName = 'Sheet.Stage'; export const Sheet = Object.assign(SheetRoot, { Trigger: SheetTrigger, Next: SheetNext, Content: SheetContent, Header: SheetHeader, Title: SheetTitle, Description: SheetDescription, Body: SheetBody, Footer: SheetFooter, Close: SheetClose, Stage: SheetStage, Slides: SheetSlides, Slide: SheetSlide, }); export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, SheetSlides, SheetSlide, };