@-reddacted-/react-ui 0.3.1 → 0.4.0

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.1",
-  "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",