@trackunit/react-map 0.2.42 → 0.2.43

package/index.cjs.js

@@ -823,7 +823,8 @@ const PANEL_SCROLL_INTERNAL_CLASS_NAME = "flex flex-1 min-h-0 flex-col overflow-
  *   ""         — element is in DOM (for Floating UI to measure) but hidden via
  *                CSS `visibility: hidden` so the pre-commit translate(0,0)
  *                position is never visible.
- *   "open"     — fades in via CSS opacity transition once placement is committed.
+ *   "open"     — appears instantly once placement is committed (no enter
+ *                animation — see docs/adr/0027-instant-panel-first-paint.md).
  *   "closing"  — fades out during the EXIT_DURATION_MS window before unmount.
  *
  * @internal
@@ -972,9 +973,9 @@ const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel
     if (effectiveAnchor === null) {
         return null;
     }
-    // data-panel drives the CSS animation state machine (Panel.css):
+    // data-panel drives the CSS visibility state machine (Panel.css):
     //   ""         — pre-commit: visibility:hidden so translate(0,0) is never seen
-    //   "open"     — fade in via opacity transition
+    //   "open"     — instant appearance (no enter animation)
     //   "closing"  — fade out before unmount
     const panelState = isClosing ? "closing" : isCommitted ? "open" : "";
     return (jsxRuntime.jsxs("div", { className: PANEL_SHELL_CLASS_NAME, "data-panel": panelState, ref: mergedShellRef, style: floatingStyles, ...getFloatingProps(), "aria-label": ariaLabel, children: [jsxRuntime.jsx("div", { className: PANEL_CHROME_CLASS_NAME, style: { maxHeight: `min(${PANEL_MAX_HEIGHT_PX}px, ${PANEL_MAX_HEIGHT_VH}vh)` }, children: jsxRuntime.jsx("div", { className: scrollSlotClassName, "data-testid": "panel-scroll-slot", ref: scrollRef, children: children }) }), onClickDismiss !== undefined ? (jsxRuntime.jsx("div", { className: "absolute right-0 top-0 z-10 -translate-y-1/2 translate-x-1/2 rounded-2xl border border-neutral-300 bg-white shadow-sm", children: jsxRuntime.jsx(PanelIconButton, { "aria-label": closeLabel, "data-testid": "panel-close-button", onClick: onClickDismiss, children: jsxRuntime.jsx(reactComponents.Icon, { ariaHidden: true, className: "text-neutral-700", name: "XMark", size: "small" }) }) })) : null] }));
@@ -2063,6 +2064,10 @@ const computePlacement = (triggerEl, containerEl) => {
 const usePopoverPlacement = (triggerRef, containerRef, options = {}) => {
     const { skip = false } = options;
     const [placement, setPlacement] = react.useState(DEFAULT_PLACEMENT);
+    // Post-paint measurement is sufficient: both callers invoke this hook where
+    // the always-mounted trigger renders, so placement settles with the map —
+    // long before a popover can open. A layout effect would only add pre-paint
+    // measurement work during map load (SAGA-675 review).
     react.useEffect(() => {
         if (skip) {
             return;

package/index.esm.js

@@ -822,7 +822,8 @@ const PANEL_SCROLL_INTERNAL_CLASS_NAME = "flex flex-1 min-h-0 flex-col overflow-
  *   ""         — element is in DOM (for Floating UI to measure) but hidden via
  *                CSS `visibility: hidden` so the pre-commit translate(0,0)
  *                position is never visible.
- *   "open"     — fades in via CSS opacity transition once placement is committed.
+ *   "open"     — appears instantly once placement is committed (no enter
+ *                animation — see docs/adr/0027-instant-panel-first-paint.md).
  *   "closing"  — fades out during the EXIT_DURATION_MS window before unmount.
  *
  * @internal
@@ -971,9 +972,9 @@ const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel
     if (effectiveAnchor === null) {
         return null;
     }
-    // data-panel drives the CSS animation state machine (Panel.css):
+    // data-panel drives the CSS visibility state machine (Panel.css):
     //   ""         — pre-commit: visibility:hidden so translate(0,0) is never seen
-    //   "open"     — fade in via opacity transition
+    //   "open"     — instant appearance (no enter animation)
     //   "closing"  — fade out before unmount
     const panelState = isClosing ? "closing" : isCommitted ? "open" : "";
     return (jsxs("div", { className: PANEL_SHELL_CLASS_NAME, "data-panel": panelState, ref: mergedShellRef, style: floatingStyles, ...getFloatingProps(), "aria-label": ariaLabel, children: [jsx("div", { className: PANEL_CHROME_CLASS_NAME, style: { maxHeight: `min(${PANEL_MAX_HEIGHT_PX}px, ${PANEL_MAX_HEIGHT_VH}vh)` }, children: jsx("div", { className: scrollSlotClassName, "data-testid": "panel-scroll-slot", ref: scrollRef, children: children }) }), onClickDismiss !== undefined ? (jsx("div", { className: "absolute right-0 top-0 z-10 -translate-y-1/2 translate-x-1/2 rounded-2xl border border-neutral-300 bg-white shadow-sm", children: jsx(PanelIconButton, { "aria-label": closeLabel, "data-testid": "panel-close-button", onClick: onClickDismiss, children: jsx(Icon, { ariaHidden: true, className: "text-neutral-700", name: "XMark", size: "small" }) }) })) : null] }));
@@ -2062,6 +2063,10 @@ const computePlacement = (triggerEl, containerEl) => {
 const usePopoverPlacement = (triggerRef, containerRef, options = {}) => {
     const { skip = false } = options;
     const [placement, setPlacement] = useState(DEFAULT_PLACEMENT);
+    // Post-paint measurement is sufficient: both callers invoke this hook where
+    // the always-mounted trigger renders, so placement settles with the map —
+    // long before a popover can open. A layout effect would only add pre-paint
+    // measurement work during map load (SAGA-675 review).
     useEffect(() => {
         if (skip) {
             return;

package/migrations/entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/map/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-map",
-  "version": "0.2.42",
+  "version": "0.2.43",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/panel/Panel.d.ts

@@ -56,7 +56,8 @@ export type PanelProps = Readonly<{
  *   ""         — element is in DOM (for Floating UI to measure) but hidden via
  *                CSS `visibility: hidden` so the pre-commit translate(0,0)
  *                position is never visible.
- *   "open"     — fades in via CSS opacity transition once placement is committed.
+ *   "open"     — appears instantly once placement is committed (no enter
+ *                animation — see docs/adr/0027-instant-panel-first-paint.md).
  *   "closing"  — fades out during the EXIT_DURATION_MS window before unmount.
  *
  * @internal