@trackunit/react-map 0.1.55 → 0.1.56

package/index.cjs.js

@@ -697,6 +697,16 @@ 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
+ * 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` (and the native `title` tooltip) for accessible naming.
+ */
+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)`.
  *
@@ -967,7 +977,7 @@ const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel
     //   "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(reactComponents.IconButton, { ariaLabel: closeLabel, icon: jsxRuntime.jsx(reactComponents.Icon, { className: "text-neutral-700", name: "XMark", size: "small" }), onClick: onClickDismiss, size: "small", variant: "ghost" }) })) : null] }));
+    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] }));
 };
 Panel.displayName = "Panel";
 
@@ -11897,6 +11907,7 @@ exports.MARKER_TUNING = MARKER_TUNING;
 exports.MapLoadingState = MapLoadingState;
 exports.MapMarker = MapMarker;
 exports.MapMarkerIcon = MapMarkerIcon;
+exports.PanelIconButton = PanelIconButton;
 exports.ShapeAnnotationLabel = ShapeAnnotationLabel;
 exports.buildExpandedIds = buildExpandedIds;
 exports.cvaMapMarker = cvaMapMarker;

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 { useMergeRefs, IconButton, Icon, Spinner, Text, useMeasure, useContainerBreakpoints, useDebounce, useWatch, useKeyboardShortcut, Tooltip, 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';
@@ -696,6 +696,16 @@ 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
+ * 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` (and the native `title` tooltip) for accessible naming.
+ */
+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)`.
  *
@@ -966,7 +976,7 @@ const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel
     //   "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(IconButton, { ariaLabel: closeLabel, icon: jsx(Icon, { className: "text-neutral-700", name: "XMark", size: "small" }), onClick: onClickDismiss, size: "small", variant: "ghost" }) })) : null] }));
+    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] }));
 };
 Panel.displayName = "Panel";
 
@@ -11829,4 +11839,4 @@ const mockMapApi = (overrides) => {
  */
 setupLibraryTranslations();
 
-export { ClusterMarker, ClusterStick, Controls, DEFAULT_MARKER_SIZE_BREAKPOINTS, DefaultControls, Layers, MARKER_DARK_PILL, MARKER_DISC_BORDER_WIDTH_PX, MARKER_LIGHT_PILL, MARKER_PILL_CONTENT_LAYOUT_SIZE, MARKER_SIZE_MAP, MARKER_TUNING, MapLoadingState, MapMarker, MapMarkerIcon, ShapeAnnotationLabel, buildExpandedIds, cvaMapMarker, cvaMarkerIndicator, mockMapApi, useAdaptiveMarkerHelpers, useAutoPanResolver, useCameraIdle, useCameraState, useClusterCountFormat, useControlStack, useControls, useDefaultControls, useDirectionIndicator, useEntitiesNearCursor, useExpandedIds, useFitFeatureBounds, useFitToContent, useImageOverlay, useLayers, useMap, useMapAnnotation, useMapAnnotations, useMapAppearanceControls, useMapKeyboardNavigation, useMarkerColors, useMarkerStateResolvers, useMarkers, usePanel, usePanelPreload, usePreviewMap, useRoute, useShapeLabelHelpers, useShapes, useViewportContext };
+export { ClusterMarker, ClusterStick, Controls, DEFAULT_MARKER_SIZE_BREAKPOINTS, DefaultControls, Layers, MARKER_DARK_PILL, MARKER_DISC_BORDER_WIDTH_PX, MARKER_LIGHT_PILL, MARKER_PILL_CONTENT_LAYOUT_SIZE, MARKER_SIZE_MAP, MARKER_TUNING, MapLoadingState, MapMarker, MapMarkerIcon, PanelIconButton, ShapeAnnotationLabel, buildExpandedIds, cvaMapMarker, cvaMarkerIndicator, mockMapApi, useAdaptiveMarkerHelpers, useAutoPanResolver, useCameraIdle, useCameraState, useClusterCountFormat, useControlStack, useControls, useDefaultControls, useDirectionIndicator, useEntitiesNearCursor, useExpandedIds, useFitFeatureBounds, useFitToContent, useImageOverlay, useLayers, useMap, useMapAnnotation, useMapAnnotations, useMapAppearanceControls, useMapKeyboardNavigation, useMarkerColors, useMarkerStateResolvers, useMarkers, usePanel, usePanelPreload, usePreviewMap, useRoute, useShapeLabelHelpers, useShapes, useViewportContext };

package/package.json

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

package/src/index.d.ts

@@ -39,6 +39,7 @@ export { cvaMapMarker, cvaMarkerIndicator } from "./markers/shared/mapMarkerVari
 export { MARKER_DARK_PILL, MARKER_LIGHT_PILL } from "./markers/shared/markerColors";
 export type { MarkerColorConfig, MarkerColorCssVars, ResolvedMarkerColors } from "./markers/shared/markerColors";
 export { useEntitiesNearCursor, type EntityNearCursor, type UseEntitiesNearCursorOptions, } from "./cursor/useEntitiesNearCursor";
+export { PanelIconButton, type PanelIconButtonProps } from "./panel/PanelIconButton";
 export { type HoverPanelPreloadInitiator, type PanelPreloadInitiator, type PanelPreloadInitiatorType, type ProximityPanelPreloadInitiator, } from "./panel/preload/preloadInitiators";
 export { usePanelPreload, type UsePanelPreloadOptions } from "./panel/preload/usePanelPreload";
 export { type PanelStore } from "./panel/store/panels";

package/src/panel/PanelIconButton.d.ts

@@ -0,0 +1,16 @@
+import { type MouseEventHandler, type ReactElement, type ReactNode } from "react";
+export type PanelIconButtonProps = Readonly<{
+    "aria-label": string;
+    children: ReactNode;
+    disabled?: boolean;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    "data-testid"?: string;
+}>;
+/**
+ * Lightweight ghost icon button for map panel chrome. Skips `IconButton`'s
+ * 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` (and the native `title` tooltip) for accessible naming.
+ */
+export declare const PanelIconButton: ({ "aria-label": ariaLabel, children, disabled, onClick, "data-testid": dataTestId, }: PanelIconButtonProps) => ReactElement;