@oh-just-another/react-ui 0.57.0

package/dist/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../src/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAUL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,YAAY;IAC3B,sEAAsE;IACtE,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;IAC/B,2CAA2C;IAC3C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,yFAAyF;IACzF,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAC/B,+DAA+D;IAC/D,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,wDAAwD;IACxD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,wEAAwE;IACxE,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,yCAAyC;IACzC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,OAAO,GAAI,oGASrB,YAAY,4CAkHd,CAAC"}

package/dist/popover.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { cloneElement, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import { POPOVER_OFFSET_PX } from "./constants.js";
+export const Popover = ({ trigger, children, placement = "bottom-start", offset: gap = POPOVER_OFFSET_PX, className, open: openProp, onOpenChange, ariaLabel, }) => {
+    const [openState, setOpenState] = useState(false);
+    const controlled = openProp !== undefined;
+    const open = controlled ? openProp : openState;
+    const setOpen = useCallback((next) => {
+        if (!controlled)
+            setOpenState(next);
+        onOpenChange?.(next);
+    }, [controlled, onOpenChange]);
+    const id = useId();
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
+    // Position recompute. `autoUpdate` watches scroll / resize and calls
+    // back; this re-runs `computePosition`. Re-runs after every render
+    // where `open` flipped to true (anchors might have moved while closed).
+    useLayoutEffect(() => {
+        if (!open)
+            return;
+        const t = triggerRef.current;
+        const p = popoverRef.current;
+        if (!t || !p)
+            return;
+        const update = () => {
+            void computePosition(t, p, {
+                placement,
+                middleware: [offset(gap), flip(), shift({ padding: 6 })],
+            }).then(({ x, y }) => {
+                p.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+            });
+        };
+        update();
+        const cleanup = autoUpdate(t, p, update);
+        return cleanup;
+    }, [open, placement, gap]);
+    // Outside-click + Escape close. Bound only while open.
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointer = (ev) => {
+            const t = ev.target;
+            if (!t)
+                return;
+            if (triggerRef.current?.contains(t))
+                return;
+            if (popoverRef.current?.contains(t))
+                return;
+            setOpen(false);
+        };
+        const onKey = (ev) => {
+            if (ev.key === "Escape") {
+                ev.stopPropagation();
+                setOpen(false);
+                triggerRef.current?.focus();
+            }
+        };
+        document.addEventListener("pointerdown", onPointer);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("pointerdown", onPointer);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [open, setOpen]);
+    // Clone the user's trigger element, injecting ref + onClick + aria.
+    // The trigger's own onClick (if any) is preserved and fires first.
+    const triggerWithProps = useMemo(() => {
+        if (!isValidElement(trigger))
+            return trigger;
+        const existing = trigger.props;
+        return cloneElement(trigger, {
+            ref: (el) => {
+                triggerRef.current = el;
+                const r = trigger.ref;
+                if (typeof r === "function")
+                    r(el);
+                else if (r && typeof r === "object")
+                    r.current = el;
+            },
+            onClick: (ev) => {
+                const prev = existing.onClick;
+                prev?.(ev);
+                if (ev.defaultPrevented)
+                    return;
+                setOpen(!open);
+            },
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "aria-controls": open ? id : undefined,
+        });
+    }, [trigger, open, setOpen, id]);
+    return (_jsxs(_Fragment, { children: [triggerWithProps, open
+                ? createPortal(_jsx("div", { ref: popoverRef, id: id, role: "dialog", "aria-label": ariaLabel, className: `du-popover ${className ?? ""}`.trim(), style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        // `transform` is updated by the `computePosition` callback
+                        // above. The pre-paint at (0,0) is hidden by the CSS
+                        // opacity 0 → 1 animation on `.du-popover`.
+                        zIndex: 1600,
+                    }, children: children }), document.body)
+                : null] }));
+};
+//# sourceMappingURL=popover.js.map

package/dist/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../src/popover.tsx"],"names":[],"mappings":"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"}

package/dist/property-panel.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties, type ReactNode } from "react";
+/**
+ * Compact selection toolbar. A single horizontal row of controls that
+ * reads the current selection and writes through `editor.updateStyle`.
+ * Heavy sub-pickers (color, opacity slider, corner radius slider) live
+ * behind `<Popover>` triggers so the row itself stays a small pill that
+ * can float anywhere on the canvas.
+ *
+ * Multi-selection collapses each control's value to "mixed" when
+ * members disagree; setting any value writes through to every selected
+ * shape via `editor.updateStyle` (single undo step).
+ *
+ * Mounted by `<SelectionFloatingPanel>`.
+ */
+export interface PropertyPanelProps {
+    readonly style?: CSSProperties;
+    readonly className?: string;
+    /**
+     * Mobile bottom-sheet variant: a single row of the frequently-used
+     * (primary) controls plus a vertical-dots button that expands the
+     * sheet to reveal the rest (overflow). No property is dropped —
+     * overflow is a regrouping, not a removal. Desktop (default) lays
+     * everything out in one floating pill row.
+     */
+    readonly mobile?: boolean;
+}
+export declare const PropertyPanel: ({ style, className, mobile }: PropertyPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Section: ({ label, children, }: {
+    readonly label: string;
+    readonly children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=property-panel.d.ts.map

package/dist/property-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-panel.d.ts","sourceRoot":"","sources":["../src/property-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAqDxF;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;;OAMG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,8BAAsC,kBAAkB,mDA+FrF,CAAC;AAuuCF,eAAO,MAAM,OAAO,GAAI,sBAGrB;IACD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B,4CAKA,CAAC"}