@-reddacted-/react-ui 0.3.0 → 0.4.0

package/dist/tooltip/attributeTooltips.js

@@ -0,0 +1,76 @@
+import { TooltipEngine } from "./tooltipEngine.js";
+const SELECTOR = "[data-rui-tooltip]";
+const DELAY = 300;
+function tooltipTarget(target) {
+    return target instanceof Element ? target.closest(SELECTOR) : null;
+}
+function toggleDescribedBy(el, id, add) {
+    const ids = (el.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(token => token && token !== id);
+    if (add)
+        ids.push(id);
+    if (ids.length > 0)
+        el.setAttribute("aria-describedby", ids.join(" "));
+    else
+        el.removeAttribute("aria-describedby");
+}
+/**
+ * Page-wide delegated listeners: any element with `data-rui-tooltip="text"` (optionally
+ * `data-rui-tooltip-placement`) gets a tooltip, including elements added later.
+ * Returns the uninstall function.
+ */
+export function installAttributeTooltips() {
+    const engine = new TooltipEngine((open, anchor) => toggleDescribedBy(anchor, engine.id, open));
+    const prepare = (el) => {
+        engine.content.textContent = el.dataset.ruiTooltip ?? "";
+        engine.setLook({ placement: el.dataset.ruiTooltipPlacement ?? "top" });
+    };
+    const onPointerOver = (event) => {
+        if (event.pointerType === "touch")
+            return;
+        const el = tooltipTarget(event.target);
+        if (!el || el === engine.anchor)
+            return;
+        engine.scheduleShow(el, DELAY, () => prepare(el));
+    };
+    const onPointerOut = (event) => {
+        if (event.pointerType === "touch")
+            return;
+        const el = tooltipTarget(event.target);
+        if (el && !el.contains(event.relatedTarget))
+            engine.hide();
+    };
+    const onFocusIn = (event) => {
+        const el = tooltipTarget(event.target);
+        if (!el)
+            return;
+        prepare(el);
+        engine.show(el);
+    };
+    const onFocusOut = (event) => {
+        const el = tooltipTarget(event.target);
+        if (el && !el.contains(event.relatedTarget))
+            engine.hide();
+    };
+    const onPointerDown = (event) => {
+        if (event.pointerType !== "touch")
+            return;
+        const el = tooltipTarget(event.target);
+        if (!el)
+            return;
+        prepare(el);
+        engine.showForTouch(el);
+    };
+    document.addEventListener("pointerover", onPointerOver);
+    document.addEventListener("pointerout", onPointerOut);
+    document.addEventListener("focusin", onFocusIn);
+    document.addEventListener("focusout", onFocusOut);
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+        document.removeEventListener("pointerover", onPointerOver);
+        document.removeEventListener("pointerout", onPointerOut);
+        document.removeEventListener("focusin", onFocusIn);
+        document.removeEventListener("focusout", onFocusOut);
+        document.removeEventListener("pointerdown", onPointerDown);
+        engine.hide();
+    };
+}

package/dist/tooltip/tooltipEngine.d.ts

@@ -0,0 +1,41 @@
+import type { Placement } from "@floating-ui/dom";
+export type TooltipPlacement = Placement;
+export type TooltipLook = {
+    placement?: TooltipPlacement;
+    /** Background and arrow. `"--color-x"` reads the theme variable; anything else is a raw CSS color. */
+    color?: string;
+    textColor?: string;
+    maxWidth?: string | number;
+};
+/**
+ * One tooltip bubble (a detached DOM element, appended to the body while open) with its
+ * timers, positioning and dismissal. Shared by the Tooltip component and the
+ * `data-rui-tooltip` attribute mode so both behave the same.
+ */
+export declare class TooltipEngine {
+    private readonly onOpenChange?;
+    readonly id: string;
+    readonly bubble: HTMLDivElement;
+    /** Where the content goes: text in attribute mode, a portal for the component. */
+    readonly content: HTMLDivElement;
+    private readonly arrowEl;
+    private placement;
+    private anchorEl;
+    private showTimer;
+    private hideTimer;
+    private stopAutoUpdate;
+    constructor(onOpenChange?: ((open: boolean, anchor: HTMLElement) => void) | undefined);
+    get anchor(): HTMLElement | null;
+    setLook({ placement, color, textColor, maxWidth }: TooltipLook): void;
+    /** Opens on `anchor` after `delay` ms (right away when 0). */
+    scheduleShow(anchor: HTMLElement, delay: number, beforeShow?: () => void): void;
+    /** Opens on a touch, closing by itself shortly after. */
+    showForTouch(anchor: HTMLElement): void;
+    show(anchor: HTMLElement): void;
+    hide(): void;
+    private clearTimers;
+    private readonly onKeyDown;
+    private readonly onPointerDown;
+    private position;
+}
+//# sourceMappingURL=tooltipEngine.d.ts.map

package/dist/tooltip/tooltipEngine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltipEngine.d.ts","sourceRoot":"","sources":["../../src/tooltip/tooltipEngine.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAIjD,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAA;AAExC,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,sGAAsG;IACtG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAOD;;;;GAIG;AACH,qBAAa,aAAa;IAYZ,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC;IAX1C,QAAQ,CAAC,EAAE,SAA4B;IACvC,QAAQ,CAAC,MAAM,iBAAgC;IAC/C,kFAAkF;IAClF,QAAQ,CAAC,OAAO,iBAAgC;IAChD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAgC;IACxD,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,SAAS,CAA2C;IAC5D,OAAO,CAAC,SAAS,CAA2C;IAC5D,OAAO,CAAC,cAAc,CAA0B;gBAEnB,YAAY,CAAC,GAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,aAAA;IAUxF,IAAI,MAAM,IAAI,WAAW,GAAG,IAAI,CAE/B;IAED,OAAO,CAAC,EAAE,SAAiB,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,WAAW,GAAG,IAAI;IAS7E,8DAA8D;IAC9D,YAAY,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,IAAI;IAW/E,yDAAyD;IACzD,YAAY,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAKvC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAa/B,IAAI,IAAI,IAAI;IAeZ,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAIzB;IAGD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE7B;YAEa,QAAQ;CAyBvB"}

package/dist/tooltip/tooltipEngine.js

@@ -0,0 +1,128 @@
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { resolveColor } from "../style/resolveColor.js";
+import { toLength } from "../style/toLength.js";
+const TOUCH_HIDE_DELAY = 1500;
+const STATIC_SIDE = { top: "bottom", bottom: "top", left: "right", right: "left" };
+let nextId = 0;
+/**
+ * One tooltip bubble (a detached DOM element, appended to the body while open) with its
+ * timers, positioning and dismissal. Shared by the Tooltip component and the
+ * `data-rui-tooltip` attribute mode so both behave the same.
+ */
+export class TooltipEngine {
+    constructor(onOpenChange) {
+        this.onOpenChange = onOpenChange;
+        this.id = `rui-tooltip-${nextId++}`;
+        this.bubble = document.createElement("div");
+        /** Where the content goes: text in attribute mode, a portal for the component. */
+        this.content = document.createElement("div");
+        this.arrowEl = document.createElement("div");
+        this.placement = "top";
+        this.anchorEl = null;
+        // Capture phase: Escape closes the tooltip only, not the modal or menu it sits in.
+        this.onKeyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            event.stopPropagation();
+            this.hide();
+        };
+        // Touching (or clicking) anywhere else closes the bubble.
+        this.onPointerDown = (event) => {
+            if (!this.anchorEl?.contains(event.target))
+                this.hide();
+        };
+        this.bubble.id = this.id;
+        this.bubble.className = "rui-tooltip";
+        this.bubble.setAttribute("role", "tooltip");
+        // Never interactive, whatever the content.
+        this.bubble.inert = true;
+        this.arrowEl.className = "rui-tooltip-arrow";
+        this.bubble.append(this.content, this.arrowEl);
+    }
+    get anchor() {
+        return this.anchorEl;
+    }
+    setLook({ placement = "top", color, textColor, maxWidth }) {
+        this.placement = placement;
+        const style = this.bubble.style;
+        style.setProperty("--rui-tooltip-bg", color ? resolveColor(color) : null);
+        style.setProperty("--rui-tooltip-color", textColor ? resolveColor(textColor) : null);
+        style.setProperty("--rui-tooltip-max-width", maxWidth === undefined ? null : toLength(maxWidth));
+        if (this.anchorEl)
+            void this.position();
+    }
+    /** Opens on `anchor` after `delay` ms (right away when 0). */
+    scheduleShow(anchor, delay, beforeShow) {
+        if (this.anchorEl === anchor)
+            return;
+        this.clearTimers();
+        const open = () => {
+            beforeShow?.();
+            this.show(anchor);
+        };
+        if (delay <= 0)
+            open();
+        else
+            this.showTimer = setTimeout(open, delay);
+    }
+    /** Opens on a touch, closing by itself shortly after. */
+    showForTouch(anchor) {
+        this.show(anchor);
+        this.hideTimer = setTimeout(() => this.hide(), TOUCH_HIDE_DELAY);
+    }
+    show(anchor) {
+        // Already open there: keep a pending touch auto-hide (a touch also focuses the anchor).
+        if (this.anchorEl === anchor)
+            return;
+        this.hide();
+        this.anchorEl = anchor;
+        document.body.append(this.bubble);
+        this.stopAutoUpdate = autoUpdate(anchor, this.bubble, () => void this.position());
+        document.addEventListener("keydown", this.onKeyDown, true);
+        document.addEventListener("pointerdown", this.onPointerDown, true);
+        this.onOpenChange?.(true, anchor);
+    }
+    hide() {
+        this.clearTimers();
+        const anchor = this.anchorEl;
+        if (!anchor)
+            return;
+        this.anchorEl = null;
+        this.stopAutoUpdate?.();
+        this.stopAutoUpdate = undefined;
+        this.bubble.remove();
+        delete this.bubble.dataset.placement;
+        document.removeEventListener("keydown", this.onKeyDown, true);
+        document.removeEventListener("pointerdown", this.onPointerDown, true);
+        this.onOpenChange?.(false, anchor);
+    }
+    clearTimers() {
+        clearTimeout(this.showTimer);
+        clearTimeout(this.hideTimer);
+    }
+    async position() {
+        const anchor = this.anchorEl;
+        if (!anchor)
+            return;
+        const { x, y, placement, middlewareData } = await computePosition(anchor, this.bubble, {
+            strategy: "fixed",
+            placement: this.placement,
+            middleware: [offset(8), flip(), shift({ padding: 8 }), arrow({ element: this.arrowEl, padding: 6 })],
+        });
+        // Closed or moved to another anchor while computing.
+        if (this.anchorEl !== anchor)
+            return;
+        this.bubble.style.left = `${x}px`;
+        this.bubble.style.top = `${y}px`;
+        this.bubble.dataset.placement = placement;
+        const side = placement.split("-")[0];
+        const arrowData = middlewareData.arrow;
+        Object.assign(this.arrowEl.style, {
+            left: arrowData?.x != null ? `${arrowData.x}px` : "",
+            top: arrowData?.y != null ? `${arrowData.y}px` : "",
+            right: "",
+            bottom: "",
+            [STATIC_SIDE[side]]: "-4px",
+        });
+    }
+}

package/dist/utils/childRef.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement, Ref } from "react";
+/** The ref set on a child element: React 18 keeps it on the element, React 19 in its props (reading element.ref warns there). */
+export declare function getElementRef<T>(element: ReactElement): Ref<T> | undefined;
+export declare function assignRef<T>(ref: Ref<T> | undefined, value: T | null): void;
+//# sourceMappingURL=childRef.d.ts.map

package/dist/utils/childRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"childRef.d.ts","sourceRoot":"","sources":["../../src/utils/childRef.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAI9C,iIAAiI;AACjI,wBAAgB,aAAa,CAAC,CAAC,EAAE,OAAO,EAAE,YAAY,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAI1E;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,CAG3E"}

package/dist/utils/childRef.js

@@ -0,0 +1,14 @@
+import { version } from "react";
+const REF_IN_PROPS = Number.parseInt(version, 10) >= 19;
+/** The ref set on a child element: React 18 keeps it on the element, React 19 in its props (reading element.ref warns there). */
+export function getElementRef(element) {
+    return REF_IN_PROPS
+        ? element.props.ref
+        : element.ref;
+}
+export function assignRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}

package/dist/utils/isDev.d.ts

@@ -0,0 +1,3 @@
+/** True unless the consuming bundler replaced `process.env.NODE_ENV` with "production". */
+export declare function isDev(): boolean;
+//# sourceMappingURL=isDev.d.ts.map

package/dist/utils/isDev.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isDev.d.ts","sourceRoot":"","sources":["../../src/utils/isDev.ts"],"names":[],"mappings":"AAEA,2FAA2F;AAC3F,wBAAgB,KAAK,IAAI,OAAO,CAE/B"}

package/dist/utils/isDev.js

@@ -0,0 +1,4 @@
+/** True unless the consuming bundler replaced `process.env.NODE_ENV` with "production". */
+export function isDev() {
+    return typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@-reddacted-/react-ui",
-  "version": "0.3.0",
-  "description": "Theming system, Modal, Button, ColorPicker, NavBar and error popups (imperative, REST or GraphQL fetch) for React",
+  "version": "0.4.0",
+  "description": "Themed React UI: theming system, Button, Modal, Drawer, Tooltip, DropdownMenu, Tabs, Table, Pagination, Accordion, Card, Stack, Badge, Tag, Spinner, Skeleton, PageStatus, NavBar, ColorPicker, grouped toasts (imperative, REST or GraphQL fetch) and rui-* classes for native elements",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -23,8 +23,9 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "react-colorful": "^5.6.1",
-    "@-reddacted-/react-hooks": "^0.2.0"
+    "@-reddacted-/react-hooks": "^0.3.0",
+    "@floating-ui/dom": "^1.8.0",
+    "react-colorful": "^5.6.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.1",