@raydenui/ui 0.9.7 → 0.10.0

package/dist/hooks/form/useRaydenSelect.js

@@ -0,0 +1,42 @@
+/**
+ * Adapter hook for using Rayden Select with react-hook-form.
+ *
+ * @example
+ * ```tsx
+ * import { useForm } from "react-hook-form";
+ * import { Select, SelectOption, useRaydenSelect } from "@raydenui/ui";
+ *
+ * function MyForm() {
+ *   const form = useForm<{ country: string }>();
+ *
+ *   return (
+ *     <form onSubmit={form.handleSubmit(onSubmit)}>
+ *       <Select
+ *         label="Country"
+ *         {...useRaydenSelect({ form, name: "country" })}
+ *       >
+ *         <SelectOption value="us">United States</SelectOption>
+ *         <SelectOption value="uk">United Kingdom</SelectOption>
+ *       </Select>
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+export function useRaydenSelect({ form, name }) {
+    const value = form.watch(name);
+    // See useRaydenInput: a flat errors[name] lookup cannot see nested field paths.
+    const { error } = form.getFieldState(name, form.formState);
+    const onValueChange = (newValue) => {
+        form.setValue(name, newValue, {
+            shouldValidate: true,
+            shouldDirty: true,
+            shouldTouch: true,
+        });
+    };
+    return {
+        value: value ?? "",
+        onValueChange,
+        error: error?.message,
+    };
+}

package/dist/hooks/index.cjs

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./form/index.cjs"), exports);

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export * from "./form/index.js";

package/dist/hooks/useBodyScrollLock.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBodyScrollLock = useBodyScrollLock;
+const react_1 = require("react");
+const useBrowserLayoutEffect = typeof window === "undefined" ? react_1.useEffect : react_1.useLayoutEffect;
+const locks = new WeakMap();
+/** Restore the original style only after the last open modal releases its lock. */
+function useBodyScrollLock(locked) {
+    useBrowserLayoutEffect(() => {
+        if (!locked)
+            return;
+        const body = document.body;
+        const lock = locks.get(body) ?? { count: 0, overflow: body.style.overflow };
+        lock.count++;
+        locks.set(body, lock);
+        body.style.overflow = "hidden";
+        return () => {
+            if (--lock.count === 0) {
+                body.style.overflow = lock.overflow;
+                locks.delete(body);
+            }
+        };
+    }, [locked]);
+}

package/dist/hooks/useBodyScrollLock.js

@@ -0,0 +1,21 @@
+import { useEffect, useLayoutEffect } from "react";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const locks = new WeakMap();
+/** Restore the original style only after the last open modal releases its lock. */
+export function useBodyScrollLock(locked) {
+    useBrowserLayoutEffect(() => {
+        if (!locked)
+            return;
+        const body = document.body;
+        const lock = locks.get(body) ?? { count: 0, overflow: body.style.overflow };
+        lock.count++;
+        locks.set(body, lock);
+        body.style.overflow = "hidden";
+        return () => {
+            if (--lock.count === 0) {
+                body.style.overflow = lock.overflow;
+                locks.delete(body);
+            }
+        };
+    }, [locked]);
+}

package/dist/hooks/useCollisionAwareSide.cjs

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCollisionAwareSide = useCollisionAwareSide;
+const react_1 = require("react");
+const OPPOSITE = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left",
+};
+/** Does the panel fit between the trigger and the viewport edge on this side? */
+function fits(side, trigger, panel, margin, viewport) {
+    switch (side) {
+        case "top":
+            return trigger.top - panel.height - margin >= 0;
+        case "bottom":
+            return trigger.bottom + panel.height + margin <= viewport.innerHeight;
+        case "left":
+            return trigger.left - panel.width - margin >= 0;
+        case "right":
+            return trigger.right + panel.width + margin <= viewport.innerWidth;
+    }
+}
+/**
+ * Resolve which side an anchored panel should actually open on.
+ *
+ * Fixed side classes put panels off-screen near a viewport edge — a tooltip anchored
+ * at the top rendered above the visible area, and a listbox near the bottom opened
+ * past it. This flips to the opposite side when the preferred one does not fit and
+ * the opposite one does, and re-measures on scroll and resize.
+ *
+ * Returns the preferred side unchanged until the panel has been measured, so the
+ * first paint matches the caller's intent.
+ */
+function useCollisionAwareSide(preferred, open, triggerRef, panelRef, margin = 8) {
+    const [side, setSide] = (0, react_1.useState)(preferred);
+    const measure = (0, react_1.useCallback)(() => {
+        const trigger = triggerRef.current?.getBoundingClientRect();
+        const panel = panelRef.current?.getBoundingClientRect();
+        const viewport = triggerRef.current?.ownerDocument.defaultView;
+        if (!trigger || !panel || !viewport || panel.height === 0)
+            return;
+        const opposite = OPPOSITE[preferred];
+        setSide(!fits(preferred, trigger, panel, margin, viewport) &&
+            fits(opposite, trigger, panel, margin, viewport)
+            ? opposite
+            : preferred);
+    }, [preferred, triggerRef, panelRef, margin]);
+    (0, react_1.useEffect)(() => {
+        if (!open) {
+            setSide(preferred);
+            return;
+        }
+        const viewport = triggerRef.current?.ownerDocument.defaultView;
+        if (!viewport)
+            return;
+        measure();
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+        if (triggerRef.current)
+            observer?.observe(triggerRef.current);
+        if (panelRef.current)
+            observer?.observe(panelRef.current);
+        viewport.addEventListener("scroll", measure, true);
+        viewport.addEventListener("resize", measure);
+        return () => {
+            observer?.disconnect();
+            viewport.removeEventListener("scroll", measure, true);
+            viewport.removeEventListener("resize", measure);
+        };
+    }, [open, preferred, measure, triggerRef, panelRef]);
+    return side;
+}

package/dist/hooks/useCollisionAwareSide.js

@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useState } from "react";
+const OPPOSITE = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left",
+};
+/** Does the panel fit between the trigger and the viewport edge on this side? */
+function fits(side, trigger, panel, margin, viewport) {
+    switch (side) {
+        case "top":
+            return trigger.top - panel.height - margin >= 0;
+        case "bottom":
+            return trigger.bottom + panel.height + margin <= viewport.innerHeight;
+        case "left":
+            return trigger.left - panel.width - margin >= 0;
+        case "right":
+            return trigger.right + panel.width + margin <= viewport.innerWidth;
+    }
+}
+/**
+ * Resolve which side an anchored panel should actually open on.
+ *
+ * Fixed side classes put panels off-screen near a viewport edge — a tooltip anchored
+ * at the top rendered above the visible area, and a listbox near the bottom opened
+ * past it. This flips to the opposite side when the preferred one does not fit and
+ * the opposite one does, and re-measures on scroll and resize.
+ *
+ * Returns the preferred side unchanged until the panel has been measured, so the
+ * first paint matches the caller's intent.
+ */
+export function useCollisionAwareSide(preferred, open, triggerRef, panelRef, margin = 8) {
+    const [side, setSide] = useState(preferred);
+    const measure = useCallback(() => {
+        const trigger = triggerRef.current?.getBoundingClientRect();
+        const panel = panelRef.current?.getBoundingClientRect();
+        const viewport = triggerRef.current?.ownerDocument.defaultView;
+        if (!trigger || !panel || !viewport || panel.height === 0)
+            return;
+        const opposite = OPPOSITE[preferred];
+        setSide(!fits(preferred, trigger, panel, margin, viewport) &&
+            fits(opposite, trigger, panel, margin, viewport)
+            ? opposite
+            : preferred);
+    }, [preferred, triggerRef, panelRef, margin]);
+    useEffect(() => {
+        if (!open) {
+            setSide(preferred);
+            return;
+        }
+        const viewport = triggerRef.current?.ownerDocument.defaultView;
+        if (!viewport)
+            return;
+        measure();
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+        if (triggerRef.current)
+            observer?.observe(triggerRef.current);
+        if (panelRef.current)
+            observer?.observe(panelRef.current);
+        viewport.addEventListener("scroll", measure, true);
+        viewport.addEventListener("resize", measure);
+        return () => {
+            observer?.disconnect();
+            viewport.removeEventListener("scroll", measure, true);
+            viewport.removeEventListener("resize", measure);
+        };
+    }, [open, preferred, measure, triggerRef, panelRef]);
+    return side;
+}

package/dist/hooks/useControllableValue.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControllableValue = useControllableValue;
+const react_1 = require("react");
+/** Internal controlled/uncontrolled state; callback changes never reset the value. */
+function useControllableValue(value, defaultValue, onChange) {
+    const [internal, setInternal] = (0, react_1.useState)(defaultValue);
+    const latest = (0, react_1.useRef)({ value, onChange });
+    latest.current = { value, onChange };
+    const setValue = (0, react_1.useCallback)((next) => {
+        if (latest.current.value === undefined)
+            setInternal(next);
+        latest.current.onChange?.(next);
+    }, []);
+    return [value === undefined ? internal : value, setValue];
+}

package/dist/hooks/useControllableValue.js

@@ -0,0 +1,13 @@
+import { useCallback, useRef, useState } from "react";
+/** Internal controlled/uncontrolled state; callback changes never reset the value. */
+export function useControllableValue(value, defaultValue, onChange) {
+    const [internal, setInternal] = useState(defaultValue);
+    const latest = useRef({ value, onChange });
+    latest.current = { value, onChange };
+    const setValue = useCallback((next) => {
+        if (latest.current.value === undefined)
+            setInternal(next);
+        latest.current.onChange?.(next);
+    }, []);
+    return [value === undefined ? internal : value, setValue];
+}

package/dist/hooks/useDismissableLayer.cjs

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDismissableLayer = useDismissableLayer;
+const react_1 = require("react");
+// One listener set per document. Nested layers must not all handle the same Escape.
+const documents = new WeakMap();
+function topLayer(layers) {
+    return layers
+        .filter((layer) => layer.element.isConnected && layer.active())
+        .reduce((top, layer) => (top && layer.element.contains(top.element) ? top : layer), undefined);
+}
+function register(document, layer) {
+    let state = documents.get(document);
+    if (!state) {
+        const layers = [];
+        const contains = (layer, event) => event.composedPath().includes(layer.element);
+        const key = (event) => {
+            if (event.key !== "Escape" || event.defaultPrevented || event.isComposing)
+                return;
+            const top = topLayer(layers);
+            if (!top)
+                return;
+            // Also prevent the native dialog cancel action when a child popup consumes Escape.
+            event.preventDefault();
+            event.stopPropagation();
+            top.dismiss("escape");
+        };
+        const pointer = (event) => {
+            if (event.defaultPrevented)
+                return;
+            for (const layer of [...layers].reverse()) {
+                if (layer.active() && !contains(layer, event))
+                    layer.dismiss("outside-pointer");
+            }
+        };
+        const focus = (event) => {
+            for (const layer of [...layers].reverse()) {
+                if (layer.active() && layer.focusOutside() && !contains(layer, event))
+                    layer.dismiss("outside-focus");
+            }
+        };
+        const blur = (event) => {
+            // A null destination can mean Tab left the document or focus was removed.
+            if (event.relatedTarget !== null)
+                return;
+            const affected = layers.filter((layer) => contains(layer, event));
+            queueMicrotask(() => {
+                for (const layer of affected) {
+                    if (layer.active() &&
+                        layer.focusOutside() &&
+                        !layer.element.contains(document.activeElement))
+                        layer.dismiss("outside-focus");
+                }
+            });
+        };
+        document.addEventListener("keydown", key);
+        document.addEventListener("pointerdown", pointer);
+        document.addEventListener("focusin", focus);
+        document.addEventListener("focusout", blur);
+        state = {
+            layers,
+            dispose: () => {
+                document.removeEventListener("keydown", key);
+                document.removeEventListener("pointerdown", pointer);
+                document.removeEventListener("focusin", focus);
+                document.removeEventListener("focusout", blur);
+            },
+        };
+        documents.set(document, state);
+    }
+    state.layers.push(layer);
+    return () => {
+        const index = state.layers.indexOf(layer);
+        if (index !== -1)
+            state.layers.splice(index, 1);
+        if (!state.layers.length) {
+            state.dispose();
+            documents.delete(document);
+        }
+    };
+}
+/** For anchored, non-portalled popup roots. Modal dialogs retain native dismissal. */
+function useDismissableLayer({ open, containerRef, onDismiss, dismissOnFocusOutside = true, }) {
+    const latest = (0, react_1.useRef)({ open, onDismiss, dismissOnFocusOutside });
+    latest.current = { open, onDismiss, dismissOnFocusOutside };
+    (0, react_1.useEffect)(() => {
+        const element = containerRef.current;
+        if (!open || !element)
+            return;
+        return register(element.ownerDocument, {
+            element,
+            active: () => latest.current.open && element.isConnected,
+            dismiss: (reason) => {
+                if (latest.current.open)
+                    latest.current.onDismiss(reason);
+            },
+            focusOutside: () => latest.current.dismissOnFocusOutside,
+        });
+    }, [open, containerRef]);
+}

package/dist/hooks/useDismissableLayer.js

@@ -0,0 +1,97 @@
+import { useEffect, useRef } from "react";
+// One listener set per document. Nested layers must not all handle the same Escape.
+const documents = new WeakMap();
+function topLayer(layers) {
+    return layers
+        .filter((layer) => layer.element.isConnected && layer.active())
+        .reduce((top, layer) => (top && layer.element.contains(top.element) ? top : layer), undefined);
+}
+function register(document, layer) {
+    let state = documents.get(document);
+    if (!state) {
+        const layers = [];
+        const contains = (layer, event) => event.composedPath().includes(layer.element);
+        const key = (event) => {
+            if (event.key !== "Escape" || event.defaultPrevented || event.isComposing)
+                return;
+            const top = topLayer(layers);
+            if (!top)
+                return;
+            // Also prevent the native dialog cancel action when a child popup consumes Escape.
+            event.preventDefault();
+            event.stopPropagation();
+            top.dismiss("escape");
+        };
+        const pointer = (event) => {
+            if (event.defaultPrevented)
+                return;
+            for (const layer of [...layers].reverse()) {
+                if (layer.active() && !contains(layer, event))
+                    layer.dismiss("outside-pointer");
+            }
+        };
+        const focus = (event) => {
+            for (const layer of [...layers].reverse()) {
+                if (layer.active() && layer.focusOutside() && !contains(layer, event))
+                    layer.dismiss("outside-focus");
+            }
+        };
+        const blur = (event) => {
+            // A null destination can mean Tab left the document or focus was removed.
+            if (event.relatedTarget !== null)
+                return;
+            const affected = layers.filter((layer) => contains(layer, event));
+            queueMicrotask(() => {
+                for (const layer of affected) {
+                    if (layer.active() &&
+                        layer.focusOutside() &&
+                        !layer.element.contains(document.activeElement))
+                        layer.dismiss("outside-focus");
+                }
+            });
+        };
+        document.addEventListener("keydown", key);
+        document.addEventListener("pointerdown", pointer);
+        document.addEventListener("focusin", focus);
+        document.addEventListener("focusout", blur);
+        state = {
+            layers,
+            dispose: () => {
+                document.removeEventListener("keydown", key);
+                document.removeEventListener("pointerdown", pointer);
+                document.removeEventListener("focusin", focus);
+                document.removeEventListener("focusout", blur);
+            },
+        };
+        documents.set(document, state);
+    }
+    state.layers.push(layer);
+    return () => {
+        const index = state.layers.indexOf(layer);
+        if (index !== -1)
+            state.layers.splice(index, 1);
+        if (!state.layers.length) {
+            state.dispose();
+            documents.delete(document);
+        }
+    };
+}
+/** For anchored, non-portalled popup roots. Modal dialogs retain native dismissal. */
+export function useDismissableLayer({ open, containerRef, onDismiss, dismissOnFocusOutside = true, }) {
+    const latest = useRef({ open, onDismiss, dismissOnFocusOutside });
+    latest.current = { open, onDismiss, dismissOnFocusOutside };
+    useEffect(() => {
+        const element = containerRef.current;
+        if (!open || !element)
+            return;
+        return register(element.ownerDocument, {
+            element,
+            active: () => latest.current.open && element.isConnected,
+            dismiss: (reason) => {
+                if (latest.current.open)
+                    latest.current.onDismiss(reason);
+            },
+            focusOutside: () => latest.current.dismissOnFocusOutside,
+        });
+    }, [open, containerRef]);
+}

package/dist/hooks/usePopupList.cjs

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopupList = usePopupList;
+const react_1 = require("react");
+const useDismissableLayer_1 = require("./useDismissableLayer.cjs");
+/** Shared focus, dismissal and navigation for Select and DropdownMenu. */
+function usePopupList({ open, setOpen, containerRef, triggerRef, listRef, role, selected = false, }) {
+    const initial = (0, react_1.useRef)("selected");
+    const search = (0, react_1.useRef)({ value: "", time: 0 });
+    const items = (0, react_1.useCallback)(() => {
+        const list = listRef.current;
+        if (!list)
+            return [];
+        return Array.from(list.querySelectorAll(`[role="${role}"]`)).filter((item) => item.closest('[role="menu"], [role="listbox"]') === list &&
+            !item.matches(':disabled, [aria-disabled="true"]') &&
+            !item.closest("[hidden], [inert]") &&
+            item.getClientRects().length > 0 &&
+            item.ownerDocument.defaultView?.getComputedStyle(item).visibility !== "hidden");
+    }, [listRef, role]);
+    const focusInitial = (0, react_1.useCallback)(() => {
+        const enabled = items();
+        const target = initial.current === "last"
+            ? enabled[enabled.length - 1]
+            : initial.current === "selected" && selected
+                ? (enabled.find((item) => item.getAttribute("aria-selected") === "true") ?? enabled[0])
+                : enabled[0];
+        target?.focus();
+    }, [items, selected]);
+    (0, react_1.useEffect)(() => {
+        if (!open) {
+            search.current = { value: "", time: 0 };
+            return;
+        }
+        const timer = setTimeout(focusInitial, 0);
+        return () => clearTimeout(timer);
+    }, [open, focusInitial]);
+    const close = (0, react_1.useCallback)((restoreFocus = false) => {
+        const list = listRef.current;
+        // Restore before consumer callbacks can open another dialog. No delayed focus theft.
+        if (restoreFocus && list?.contains(list.ownerDocument.activeElement))
+            triggerRef.current?.focus({ preventScroll: true });
+        setOpen(false);
+        initial.current = "selected";
+    }, [listRef, triggerRef, setOpen]);
+    (0, useDismissableLayer_1.useDismissableLayer)({ open, containerRef, onDismiss: (reason) => close(reason === "escape") });
+    const onTriggerKeyDown = (event) => {
+        if (event.defaultPrevented ||
+            event.currentTarget.disabled ||
+            (event.key !== "ArrowDown" && event.key !== "ArrowUp"))
+            return;
+        event.preventDefault();
+        initial.current = event.key === "ArrowUp" ? "last" : selected ? "selected" : "first";
+        if (open)
+            focusInitial();
+        else
+            setOpen(true);
+    };
+    const onListKeyDown = (event) => {
+        if (event.defaultPrevented ||
+            event.isPropagationStopped() ||
+            event.nativeEvent.isComposing ||
+            event.target.closest('[role="menu"], [role="listbox"]') !== listRef.current)
+            return;
+        const enabled = items();
+        if (!enabled.length)
+            return;
+        const current = enabled.findIndex((item) => item === event.currentTarget.ownerDocument.activeElement);
+        let next;
+        if (event.key === "ArrowDown")
+            next = (current + 1) % enabled.length;
+        else if (event.key === "ArrowUp")
+            next = current <= 0 ? enabled.length - 1 : current - 1;
+        else if (event.key === "Home")
+            next = 0;
+        else if (event.key === "End")
+            next = enabled.length - 1;
+        else if (event.key.length === 1 &&
+            event.key !== " " &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey) {
+            const now = Date.now();
+            const value = (now - search.current.time < 500 ? search.current.value : "") + event.key.toLowerCase();
+            search.current = { value, time: now };
+            const query = [...value].every((char) => char === value[0]) ? value[0] : value;
+            const start = query.length === 1 ? current + 1 : Math.max(current, 0);
+            for (let offset = 0; offset < enabled.length; offset++) {
+                const index = (start + offset + enabled.length) % enabled.length;
+                if (enabled[index].textContent?.trim().toLowerCase().startsWith(query)) {
+                    next = index;
+                    break;
+                }
+            }
+        }
+        if (next !== undefined) {
+            event.preventDefault();
+            enabled[next]?.focus();
+        }
+    };
+    return { close, onTriggerKeyDown, onListKeyDown };
+}