@trackunit/react-map 0.2.46 → 0.2.48-alpha-90b6c9b97dd.0

package/index.cjs.js

@@ -700,13 +700,12 @@ const SHAPE_STYLE_DEFAULTS = {
 const PANEL_ICON_BUTTON_CLASS_NAME = tailwindMerge.twMerge("inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-1.5 text-neutral-600", "hover:bg-black/5 hover:text-neutral-700", "active:bg-black/10 active:text-neutral-800", "focus-visible:bg-black/10 focus-visible:text-neutral-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1", "disabled:cursor-not-allowed disabled:bg-transparent disabled:text-neutral-400");
 /**
  * Lightweight ghost icon button for map panel chrome. Skips `IconButton`'s
- * Button stack so icon glyphs paint on the same frame as panel content, but
- * still wraps the trigger in the shared `Tooltip` for hover labels.
+ * Tooltip/Button stack so icon glyphs paint on the same frame as panel content.
  *
  * Consumers should pass decorative icons with `ariaHidden` and rely on
- * `aria-label` for accessible naming and tooltip text.
+ * `aria-label` (and the native `title` tooltip) for accessible naming.
  */
-const PanelIconButton = ({ "aria-label": ariaLabel, children, disabled = false, onClick, "data-testid": dataTestId, }) => (jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, disabled: disabled, interactable: false, label: ariaLabel, children: jsxRuntime.jsx("button", { "aria-label": ariaLabel, className: PANEL_ICON_BUTTON_CLASS_NAME, "data-testid": dataTestId, disabled: disabled, onClick: onClick, type: "button", children: children }) }));
+const PanelIconButton = ({ "aria-label": ariaLabel, children, disabled = false, onClick, "data-testid": dataTestId, }) => (jsxRuntime.jsx("button", { "aria-label": ariaLabel, className: PANEL_ICON_BUTTON_CLASS_NAME, "data-testid": dataTestId, disabled: disabled, onClick: onClick, title: ariaLabel, type: "button", children: children }));
 
 /**
  * CSS `max-height` of the Panel shell — `min(320px, 40vh)`.
@@ -824,8 +823,7 @@ 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"     — appears instantly once placement is committed (no enter
- *                animation — see docs/adr/0027-instant-panel-first-paint.md).
+ *   "open"     — fades in via CSS opacity transition once placement is committed.
  *   "closing"  — fades out during the EXIT_DURATION_MS window before unmount.
  *
  * @internal
@@ -974,9 +972,9 @@ const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel
     if (effectiveAnchor === null) {
         return null;
     }
-    // data-panel drives the CSS visibility state machine (Panel.css):
+    // data-panel drives the CSS animation state machine (Panel.css):
     //   ""         — pre-commit: visibility:hidden so translate(0,0) is never seen
-    //   "open"     — instant appearance (no enter animation)
+    //   "open"     — fade in via opacity transition
     //   "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] }));
@@ -2065,10 +2063,6 @@ 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

@@ -4,7 +4,7 @@ import { INITIAL_CAMERA_STATE, INITIAL_MAP_STATUS, KEYBOARD_PAN_AMOUNT, KEYBOARD
 export { ANCHOR_SELECTOR, DEFAULT_MAP_APPEARANCE, HIT_SURFACE_SELECTOR, INITIAL_CAMERA_STATE, INITIAL_INTERACTION_STATE, INITIAL_MAP_STATE, INITIAL_MAP_STATUS, computeMarkerDomPortalZIndex, defineAdapter, geometryTypeToShapeType, mapAppearanceSchema, mapThemeSchema, mapTypeSchema } from '@trackunit/react-map-adapter-shared';
 import { useSyncExternalStore, useMemo, useState, useRef, useCallback, useLayoutEffect, useEffect, useReducer, createContext, useContext, memo, Suspense, useId, Fragment as Fragment$1, forwardRef } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { Tooltip, useMergeRefs, Icon, Spinner, Text, useMeasure, useContainerBreakpoints, useDebounce, useWatch, useKeyboardShortcut, IconButton, ToggleGroup as ToggleGroup$1, useIsFullscreen, Popover, PopoverTrigger, PopoverContent, MoreMenu, useHover as useHover$1, cvaInteractableItem, useLocalStorageReducer } from '@trackunit/react-components';
+import { useMergeRefs, Icon, Spinner, Text, useMeasure, useContainerBreakpoints, useDebounce, useWatch, useKeyboardShortcut, Tooltip, IconButton, ToggleGroup as ToggleGroup$1, useIsFullscreen, Popover, PopoverTrigger, PopoverContent, MoreMenu, useHover as useHover$1, cvaInteractableItem, useLocalStorageReducer } from '@trackunit/react-components';
 import { twMerge } from 'tailwind-merge';
 import { useFloating, autoUpdate, offset, flip, useHover, safePolygon, useInteractions, shift, hide, useDismiss, useRole } from '@floating-ui/react';
 import { createPortal } from 'react-dom';
@@ -699,13 +699,12 @@ const SHAPE_STYLE_DEFAULTS = {
 const PANEL_ICON_BUTTON_CLASS_NAME = twMerge("inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-1.5 text-neutral-600", "hover:bg-black/5 hover:text-neutral-700", "active:bg-black/10 active:text-neutral-800", "focus-visible:bg-black/10 focus-visible:text-neutral-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1", "disabled:cursor-not-allowed disabled:bg-transparent disabled:text-neutral-400");
 /**
  * Lightweight ghost icon button for map panel chrome. Skips `IconButton`'s
- * Button stack so icon glyphs paint on the same frame as panel content, but
- * still wraps the trigger in the shared `Tooltip` for hover labels.
+ * Tooltip/Button stack so icon glyphs paint on the same frame as panel content.
  *
  * Consumers should pass decorative icons with `ariaHidden` and rely on
- * `aria-label` for accessible naming and tooltip text.
+ * `aria-label` (and the native `title` tooltip) for accessible naming.
  */
-const PanelIconButton = ({ "aria-label": ariaLabel, children, disabled = false, onClick, "data-testid": dataTestId, }) => (jsx(Tooltip, { delayed: true, disabled: disabled, interactable: false, label: ariaLabel, children: jsx("button", { "aria-label": ariaLabel, className: PANEL_ICON_BUTTON_CLASS_NAME, "data-testid": dataTestId, disabled: disabled, onClick: onClick, type: "button", children: children }) }));
+const PanelIconButton = ({ "aria-label": ariaLabel, children, disabled = false, onClick, "data-testid": dataTestId, }) => (jsx("button", { "aria-label": ariaLabel, className: PANEL_ICON_BUTTON_CLASS_NAME, "data-testid": dataTestId, disabled: disabled, onClick: onClick, title: ariaLabel, type: "button", children: children }));
 
 /**
  * CSS `max-height` of the Panel shell — `min(320px, 40vh)`.
@@ -823,8 +822,7 @@ 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"     — appears instantly once placement is committed (no enter
- *                animation — see docs/adr/0027-instant-panel-first-paint.md).
+ *   "open"     — fades in via CSS opacity transition once placement is committed.
  *   "closing"  — fades out during the EXIT_DURATION_MS window before unmount.
  *
  * @internal
@@ -973,9 +971,9 @@ const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel
     if (effectiveAnchor === null) {
         return null;
     }
-    // data-panel drives the CSS visibility state machine (Panel.css):
+    // data-panel drives the CSS animation state machine (Panel.css):
     //   ""         — pre-commit: visibility:hidden so translate(0,0) is never seen
-    //   "open"     — instant appearance (no enter animation)
+    //   "open"     — fade in via opacity transition
     //   "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] }));
@@ -2064,10 +2062,6 @@ 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/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@trackunit/react-map",
-  "version": "0.2.46",
+  "version": "0.2.48-alpha-90b6c9b97dd.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.4.0",
-    "@trackunit/css-class-variance-utilities": "1.13.90",
-    "@trackunit/react-form-components": "2.3.6",
-    "@trackunit/react-core-hooks": "1.19.5",
-    "@trackunit/geo-json-utils": "1.14.93",
-    "@trackunit/i18n-library-translation": "2.2.5",
+    "@trackunit/react-components": "2.4.2-alpha-90b6c9b97dd.0",
+    "@trackunit/css-class-variance-utilities": "1.13.92-alpha-90b6c9b97dd.0",
+    "@trackunit/react-form-components": "2.3.8-alpha-90b6c9b97dd.0",
+    "@trackunit/react-core-hooks": "1.19.7-alpha-90b6c9b97dd.0",
+    "@trackunit/geo-json-utils": "1.14.95-alpha-90b6c9b97dd.0",
+    "@trackunit/i18n-library-translation": "2.2.7-alpha-90b6c9b97dd.0",
     "react-minimal-pie-chart": "^8.4.0",
-    "@trackunit/react-map-adapter-shared": "0.0.74",
-    "@trackunit/react-map-color-utils": "0.0.59",
-    "@trackunit/ui-design-tokens": "1.13.89",
+    "@trackunit/react-map-adapter-shared": "0.0.76-alpha-90b6c9b97dd.0",
+    "@trackunit/react-map-color-utils": "0.0.61-alpha-90b6c9b97dd.0",
+    "@trackunit/ui-design-tokens": "1.13.91-alpha-90b6c9b97dd.0",
     "@floating-ui/react": "^0.26.25",
     "es-toolkit": "^1.39.10",
     "tailwind-merge": "^2.0.0",

package/src/panel/Panel.d.ts

@@ -56,8 +56,7 @@ 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"     — appears instantly once placement is committed (no enter
- *                animation — see docs/adr/0027-instant-panel-first-paint.md).
+ *   "open"     — fades in via CSS opacity transition once placement is committed.
  *   "closing"  — fades out during the EXIT_DURATION_MS window before unmount.
  *
  * @internal

package/src/panel/PanelIconButton.d.ts

@@ -8,10 +8,9 @@ export type PanelIconButtonProps = Readonly<{
 }>;
 /**
  * Lightweight ghost icon button for map panel chrome. Skips `IconButton`'s
- * Button stack so icon glyphs paint on the same frame as panel content, but
- * still wraps the trigger in the shared `Tooltip` for hover labels.
+ * Tooltip/Button stack so icon glyphs paint on the same frame as panel content.
  *
  * Consumers should pass decorative icons with `ariaHidden` and rely on
- * `aria-label` for accessible naming and tooltip text.
+ * `aria-label` (and the native `title` tooltip) for accessible naming.
  */
 export declare const PanelIconButton: ({ "aria-label": ariaLabel, children, disabled, onClick, "data-testid": dataTestId, }: PanelIconButtonProps) => ReactElement;

package/migrations/entry.js.map

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