@passui/react 0.0.0-stage → 0.1.14

package/src/components/sheet/modal-environment.ts

@@ -0,0 +1,113 @@
+import {
+    FLOATING_LAYER,
+    ownsFloatingLayer,
+} from "../../lib/floating-layers"
+
+const surfaces: HTMLElement[] = []
+const isolated = new Map<HTMLElement, boolean>()
+let overflow = ""
+let overflowPriority = ""
+
+function restoreBackground() {
+    for (const [element, inert] of isolated)
+        element.inert = inert
+    isolated.clear()
+}
+
+function isolateBackground() {
+    restoreBackground()
+    const surface = surfaces.at(-1)
+    if (!surface) return
+    const roots = [surface.parentElement ?? surface]
+    for (const layer of document.querySelectorAll<HTMLElement>(
+        `[${FLOATING_LAYER}]`
+    )) {
+        if (ownsFloatingLayer(surface, layer))
+            roots.push(layer)
+    }
+    const visit = (parent: HTMLElement) => {
+        for (const child of parent.children) {
+            if (!(child instanceof HTMLElement)) continue
+            if (roots.includes(child)) continue
+            if (roots.some((root) => child.contains(root))) {
+                visit(child)
+            } else if (
+                !child.matches("script, style, link")
+            ) {
+                isolated.set(child, child.inert)
+                child.inert = true
+            }
+        }
+    }
+    visit(document.body)
+}
+
+/** Keeps nested sheets and their portaled controls above an inactive background. */
+export function enterModalEnvironment(
+    surface: HTMLElement
+): () => void {
+    if (!surfaces.length) {
+        overflow =
+            document.body.style.getPropertyValue("overflow")
+        overflowPriority =
+            document.body.style.getPropertyPriority(
+                "overflow"
+            )
+        document.body.style.setProperty("overflow", "hidden")
+    }
+    surfaces.push(surface)
+    isolateBackground()
+    const preventBackgroundScroll = (
+        event: WheelEvent | TouchEvent
+    ) => {
+        if (surfaces.at(-1) !== surface) return
+        const target = event.target
+        if (
+            target instanceof Element &&
+            (surface.contains(target) ||
+                ownsFloatingLayer(surface, target))
+        )
+            return
+        event.preventDefault()
+    }
+    document.addEventListener(
+        "wheel",
+        preventBackgroundScroll,
+        { passive: false }
+    )
+    document.addEventListener(
+        "touchmove",
+        preventBackgroundScroll,
+        { passive: false }
+    )
+    const observer = new MutationObserver(() => {
+        if (surfaces.at(-1) === surface) isolateBackground()
+    })
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    })
+    return () => {
+        observer.disconnect()
+        document.removeEventListener(
+            "wheel",
+            preventBackgroundScroll
+        )
+        document.removeEventListener(
+            "touchmove",
+            preventBackgroundScroll
+        )
+        surfaces.splice(surfaces.indexOf(surface), 1)
+        isolateBackground()
+        if (!surfaces.length) {
+            if (overflow)
+                document.body.style.setProperty(
+                    "overflow",
+                    overflow,
+                    overflowPriority
+                )
+            else
+                document.body.style.removeProperty("overflow")
+        }
+    }
+}

package/src/components/sheet/sheet-portal.tsx

@@ -0,0 +1,89 @@
+import {
+    type ReactNode,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react"
+import { createPortal } from "react-dom"
+
+/** Escape transformed page layers while retaining the source's scoped appearance. */
+export function SheetPortal({
+    children,
+}: {
+    children: ReactNode
+}) {
+    const source = useRef<HTMLSpanElement>(null)
+    const [host, setHost] = useState<HTMLDivElement | null>(
+        null
+    )
+    useLayoutEffect(() => {
+        const marker = source.current
+        if (!marker) return
+        const document = marker.ownerDocument
+        const layer = document.createElement("div")
+        layer.dataset.passuiOverlay = ""
+        layer.style.display = "contents"
+        const attributes = [
+            "data-theme",
+            "data-accent",
+            "data-os",
+            "dir",
+        ]
+        let properties = new Set<string>()
+        const inherit = () => {
+            for (const name of attributes) {
+                const value = marker
+                    .closest(`[${name}]`)
+                    ?.getAttribute(name)
+                if (value === null || value === undefined)
+                    layer.removeAttribute(name)
+                else layer.setAttribute(name, value)
+            }
+            const computed = getComputedStyle(marker)
+            const next = new Set<string>()
+            for (const name of computed) {
+                if (!name.startsWith("--")) continue
+                next.add(name)
+                layer.style.setProperty(
+                    name,
+                    computed.getPropertyValue(name)
+                )
+            }
+            for (const name of properties)
+                if (!next.has(name))
+                    layer.style.removeProperty(name)
+            properties = next
+            layer.style.colorScheme = computed.colorScheme
+            layer.style.fontFamily = computed.fontFamily
+            layer.style.direction = computed.direction
+        }
+        inherit()
+        document.body.appendChild(layer)
+        setHost(layer)
+        const observer = new MutationObserver(inherit)
+        for (
+            let ancestor = marker.parentElement;
+            ancestor;
+            ancestor = ancestor.parentElement
+        ) {
+            observer.observe(ancestor, {
+                attributes: true,
+                attributeFilter: [
+                    ...attributes,
+                    "style",
+                    "class",
+                ],
+            })
+        }
+        return () => {
+            observer.disconnect()
+            layer.remove()
+        }
+    }, [])
+    return (
+        <>
+            <span ref={source} hidden aria-hidden="true" />
+            {host && createPortal(children, host)}
+        </>
+    )
+}

package/src/components/sheet/sheet.docs.tsx

@@ -0,0 +1,75 @@
+import { SheetChoices } from "./examples/sheet-choices"
+import { useState } from "react"
+import { Button } from "../button/button"
+import { defineDocs } from "../../docs/types"
+import { SheetShare } from "./examples/sheet-share"
+import { SheetShowcase } from "./examples/sheet-showcase"
+import { SheetUsage } from "./examples/sheet-usage"
+import { Sheet } from "./sheet"
+
+type DemoProps = {
+    label: string
+}
+
+function SheetDemo({ label }: DemoProps) {
+    const [open, setOpen] = useState(false)
+    return (
+        <>
+            <Button
+                variant="secondary"
+                onClick={() => setOpen(true)}
+            >
+                Open sheet
+            </Button>
+            <Sheet
+                open={open}
+                onClose={() => setOpen(false)}
+                label={label}
+            >
+                <div className="flex flex-col gap-3 p-6">
+                    <h2 className="text-title3 font-semibold text-label">
+                        {label}
+                    </h2>
+                    <p className="text-callout text-label-secondary">
+                        Escape, a tap outside, or the button
+                        closes it.
+                    </p>
+                    <Button onClick={() => setOpen(false)}>
+                        Done
+                    </Button>
+                </div>
+            </Sheet>
+        </>
+    )
+}
+
+export const sheetDocs = defineDocs<DemoProps>()({
+    slug: "sheet",
+    name: "Sheet",
+    importPath: "@passui/react/sheet",
+    controls: {
+        label: {
+            kind: "text",
+            default: "Details",
+            required: true,
+        },
+    },
+    render: (values) => <SheetDemo {...values} />,
+    childrenSnippet: () => ({
+        imports: ['import { useState } from "react"'],
+        setup: ["const [open, setOpen] = useState(false)"],
+        expressionProps: {
+            open: "open",
+            onClose: "() => setOpen(false)",
+        },
+        children:
+            '\n    <div className="p-6">The sheet\'s content</div>\n',
+    }),
+    usage: SheetUsage,
+    showcase: SheetShowcase,
+    examples: [
+        { id: "share", component: SheetShare },
+        { id: "choices", component: SheetChoices },
+    ],
+    previewHeight: 420,
+})

package/src/components/sheet/sheet.tsx

@@ -0,0 +1,112 @@
+import {
+    AnimatePresence,
+    motion,
+    useReducedMotion,
+} from "motion/react"
+import { type ReactNode, useRef } from "react"
+import { useVisualViewport } from "../../hooks/use-visual-viewport"
+import { cn } from "../../lib/class-names"
+import { spring } from "../../motion/transitions"
+import { SheetPortal } from "./sheet-portal"
+import { useSheetFocus } from "./use-sheet-focus"
+
+interface SheetProps {
+    open: boolean
+    onClose: () => void
+    /** Read out by screen readers as the sheet's name. */
+    label: string
+    labelledBy?: string
+    className?: string
+    children: ReactNode
+}
+
+/**
+ * A modal card: rises from the bottom edge on phones and floats in the
+ * middle on larger screens. Escape or a tap outside closes it.
+ */
+export function Sheet({ open, ...props }: SheetProps) {
+    return (
+        <AnimatePresence>
+            {open && (
+                <SheetPortal>
+                    <OpenSheet {...props} />
+                </SheetPortal>
+            )}
+        </AnimatePresence>
+    )
+}
+
+function OpenSheet({
+    onClose,
+    label,
+    labelledBy,
+    className,
+    children,
+}: Omit<SheetProps, "open">) {
+    const panel = useRef<HTMLDivElement>(null)
+    const reducedMotion = useReducedMotion()
+    const viewport = useVisualViewport()
+    useSheetFocus(panel, onClose)
+
+    return (
+        <div
+            className={cn(
+                "fixed inset-0 z-[65] flex items-end justify-center",
+                "sm:items-center sm:p-6"
+            )}
+            style={
+                viewport
+                    ? {
+                          top: viewport.top,
+                          left: viewport.left,
+                          width: viewport.width,
+                          height: viewport.height,
+                          bottom: "auto",
+                          right: "auto",
+                      }
+                    : undefined
+            }
+        >
+            <motion.div
+                aria-hidden="true"
+                className="absolute inset-0 bg-black/30 backdrop-blur-md"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                onClick={onClose}
+            />
+            <motion.div
+                ref={panel}
+                role="dialog"
+                aria-modal="true"
+                aria-label={labelledBy ? undefined : label}
+                aria-labelledby={labelledBy}
+                tabIndex={-1}
+                className={cn(
+                    "glass-menu relative flex w-full flex-col overflow-hidden",
+                    "max-h-[92%] max-w-[560px]",
+                    "rounded-t-sheet sm:rounded-sheet",
+                    className
+                )}
+                initial={
+                    reducedMotion
+                        ? { opacity: 0 }
+                        : { y: 40, opacity: 0, scale: 0.98 }
+                }
+                animate={{ y: 0, opacity: 1, scale: 1 }}
+                exit={
+                    reducedMotion
+                        ? { opacity: 0 }
+                        : { y: 30, opacity: 0 }
+                }
+                transition={
+                    reducedMotion
+                        ? { duration: 0 }
+                        : spring.smooth
+                }
+            >
+                {children}
+            </motion.div>
+        </div>
+    )
+}

package/src/components/sheet/use-sheet-focus.ts

@@ -0,0 +1,130 @@
+import {
+    type RefObject,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react"
+import { ownsFloatingLayer } from "../../lib/floating-layers"
+import { enterModalEnvironment } from "./modal-environment"
+
+const sheets: HTMLElement[] = []
+const focusableSelector = [
+    "a[href]",
+    "button",
+    "input:not([type=hidden])",
+    "select",
+    "textarea",
+    "[tabindex]",
+    "[contenteditable=true]",
+].join(",")
+
+function focusableElements(
+    panel: HTMLElement
+): HTMLElement[] {
+    return Array.from(
+        panel.querySelectorAll<HTMLElement>(focusableSelector)
+    ).filter(
+        (element) =>
+            element.tabIndex >= 0 &&
+            !element.matches(":disabled") &&
+            !element.closest("[inert]") &&
+            element.getClientRects().length > 0 &&
+            getComputedStyle(element).visibility !== "hidden"
+    )
+}
+
+/** Keeps keyboard focus in the foremost sheet, including its floating pickers. */
+export function useSheetFocus(
+    panel: RefObject<HTMLDivElement | null>,
+    onClose: () => void
+) {
+    // Capture before children mount, since a child may use autoFocus.
+    const [opener] = useState(() =>
+        typeof document === "undefined"
+            ? null
+            : document.activeElement
+    )
+    const close = useRef(onClose)
+    useEffect(() => {
+        close.current = onClose
+    }, [onClose])
+
+    useLayoutEffect(() => {
+        const surface = panel.current
+        if (!surface) return
+        sheets.push(surface)
+        const foremost = () => sheets.at(-1) === surface
+        const focusFirst = () =>
+            (focusableElements(surface)[0] ?? surface).focus()
+        const inFloatingLayer = (element: Element | null) =>
+            ownsFloatingLayer(surface, element)
+        const belongsToSheet = (element: Element | null) =>
+            surface.contains(element) ||
+            inFloatingLayer(element)
+
+        if (!surface.contains(document.activeElement))
+            surface.focus({ preventScroll: true })
+        const leaveModalEnvironment =
+            enterModalEnvironment(surface)
+
+        const onFocus = (event: FocusEvent) => {
+            if (
+                foremost() &&
+                !belongsToSheet(
+                    event.target as Element | null
+                )
+            )
+                focusFirst()
+        }
+        const onKey = (event: KeyboardEvent) => {
+            if (!foremost() || event.defaultPrevented) return
+            if (event.key === "Escape") {
+                // Floating controls handle their own Escape before the sheet.
+                if (inFloatingLayer(document.activeElement))
+                    return
+                event.preventDefault()
+                event.stopPropagation()
+                close.current()
+            }
+            if (event.key !== "Tab") return
+            const controls = focusableElements(surface)
+            const first = controls[0] ?? surface
+            const last = controls.at(-1) ?? surface
+            const active = document.activeElement
+            if (
+                event.shiftKey &&
+                (active === surface ||
+                    active === first ||
+                    !surface.contains(active))
+            ) {
+                event.preventDefault()
+                last.focus()
+            } else if (
+                !event.shiftKey &&
+                (active === last ||
+                    !surface.contains(active) ||
+                    active === surface)
+            ) {
+                event.preventDefault()
+                first.focus()
+            }
+        }
+
+        document.addEventListener("focusin", onFocus)
+        window.addEventListener("keydown", onKey)
+        return () => {
+            const wasForemost = foremost()
+            sheets.splice(sheets.indexOf(surface), 1)
+            document.removeEventListener("focusin", onFocus)
+            window.removeEventListener("keydown", onKey)
+            leaveModalEnvironment()
+            if (
+                wasForemost &&
+                opener instanceof HTMLElement &&
+                opener.isConnected
+            )
+                opener.focus()
+        }
+    }, [panel, opener])
+}

package/src/components/sidebar/examples/sidebar-groups.tsx

@@ -0,0 +1,133 @@
+import {
+    Archive01Icon,
+    Calendar03Icon,
+    Delete02Icon,
+    Folder01Icon,
+    InboxIcon,
+    Note01Icon,
+} from "@hugeicons/core-free-icons"
+import {
+    HugeiconsIcon,
+    type IconSvgElement,
+} from "@hugeicons/react"
+import {
+    SidebarItemContent,
+    SidebarSection,
+    sidebarItemClass,
+} from "@passui/react/sidebar"
+import { useState } from "react"
+
+type Row = {
+    id: string
+    label: string
+    icon: IconSvgElement
+    count?: number
+}
+
+const sections: { title: string; items: Row[] }[] = [
+    {
+        title: "Library",
+        items: [
+            {
+                id: "notes",
+                label: "All notes",
+                icon: Note01Icon,
+                count: 248,
+            },
+            {
+                id: "today",
+                label: "Today",
+                icon: Calendar03Icon,
+                count: 4,
+            },
+            {
+                id: "inbox",
+                label: "Inbox",
+                icon: InboxIcon,
+                count: 9,
+            },
+        ],
+    },
+    {
+        title: "Folders",
+        items: [
+            {
+                id: "work",
+                label: "Work",
+                icon: Folder01Icon,
+                count: 61,
+            },
+            {
+                id: "travel",
+                label: "Travel",
+                icon: Folder01Icon,
+                count: 17,
+            },
+        ],
+    },
+    {
+        title: "More",
+        items: [
+            {
+                id: "archive",
+                label: "Archive",
+                icon: Archive01Icon,
+            },
+            {
+                id: "trash",
+                label: "Recently deleted",
+                icon: Delete02Icon,
+            },
+        ],
+    },
+]
+
+export function SidebarGroups() {
+    const [active, setActive] = useState("today")
+
+    return (
+        <nav
+            aria-label="Notes"
+            className="flex w-60 flex-col gap-5 rounded-4xl bg-sidebar p-3"
+        >
+            {sections.map((section) => (
+                <SidebarSection
+                    key={section.title}
+                    title={section.title}
+                >
+                    {section.items.map((item) => (
+                        <a
+                            key={item.id}
+                            href={`#${item.id}`}
+                            aria-current={
+                                item.id === active
+                                    ? "page"
+                                    : undefined
+                            }
+                            className={sidebarItemClass(
+                                item.id === active
+                            )}
+                            onClick={(event) => {
+                                event.preventDefault()
+                                setActive(item.id)
+                            }}
+                        >
+                            <SidebarItemContent
+                                active={item.id === active}
+                                count={item.count}
+                                icon={
+                                    <HugeiconsIcon
+                                        icon={item.icon}
+                                        size={18}
+                                    />
+                                }
+                            >
+                                {item.label}
+                            </SidebarItemContent>
+                        </a>
+                    ))}
+                </SidebarSection>
+            ))}
+        </nav>
+    )
+}