@trackunit/react-map 0.2.1 → 0.2.3

package/index.cjs.js

@@ -12,7 +12,6 @@ var reactDom = require('react-dom');
 var esToolkit = require('es-toolkit');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var reactFormComponents = require('@trackunit/react-form-components');
-var reactModal = require('@trackunit/react-modal');
 var zod = require('zod');
 var reactMinimalPieChart = require('react-minimal-pie-chart');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
@@ -38,6 +37,7 @@ var defaultTranslations = {
 	"map.loadingData": "Loading map data",
 	"map.loadingErrorMessage": "Unable to load the map. Please try again later.",
 	"multiGeometry.badge.tooltip": "Part of a multi-part shape",
+	"panels.close": "Close",
 	"settings.mapStyle.dark": "Dark",
 	"settings.mapStyle.light": "Light",
 	"settings.mapStyle.roadmap": "Road map",
@@ -1180,13 +1180,14 @@ const createMapComponent = ({ adapter, Renderer, adapterName, containerRefHolder
         const containerHeight = geometry?.height ?? Infinity;
         const availableSpace = breakpoints.isSm && containerHeight >= HEIGHT_COMFORTABLE_THRESHOLD ? "comfortable" : "constrained";
         const responsiveMode = deriveResponsiveMode(breakpoints.isSm, breakpoints.isMd, containerHeight);
+        const [safeAreaContentEl, setSafeAreaContentEl] = react.useState(null);
+        const [safeAreaPanelPortalEl, setSafeAreaPanelPortalEl] = react.useState(null);
         const layout = react.useMemo(() => ({
             availableSpace,
             responsiveMode,
-        }), [availableSpace, responsiveMode]);
+            safeAreaContentEl,
+        }), [availableSpace, responsiveMode, safeAreaContentEl]);
         const mapMoveSource = react.useMemo(() => ({ on: adapter.on.bind(adapter) }), []);
-        const [safeAreaContentEl, setSafeAreaContentEl] = react.useState(null);
-        const [safeAreaPanelPortalEl, setSafeAreaPanelPortalEl] = react.useState(null);
         const content = (jsxRuntime.jsxs("div", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ?? "Interactive map", className: tailwindMerge.twMerge(
             // ZStack: full-size grid with a single cell so children overlay the map
             "isolate grid h-full w-full grid-cols-1 grid-rows-1", className), "data-testid": dataTestId, id: containerId, ref: mergedRef, role: "application", style: style, tabIndex: 0, children: [jsxRuntime.jsxs("div", { className: "relative col-start-1 row-start-1 grid h-full min-h-[200px] w-full", children: [jsxRuntime.jsx(Renderer, { adapterInstance: adapter, className: "h-full w-full", style: { height: "100%", width: "100%" } }), jsxRuntime.jsx(AdapterReadinessOverlay, { adapter: adapter })] }), jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 col-start-1 row-start-1 overflow-visible", "data-testid": "map-marker-overlay-portal" }), jsxRuntime.jsx("div", { className: "pointer-events-none relative isolate col-start-1 row-start-1 h-full min-h-0 w-full overflow-clip", "data-testid": "map-panel-overlay-portal", ref: setSafeAreaPanelPortalEl }), panelStore !== undefined ? (jsxRuntime.jsx(PanelOrchestrator, { anchoredPortalEl: safeAreaPanelPortalEl, containerEl: safeAreaContentEl ?? containerEl, mapMoveSource: mapMoveSource, store: panelStore })) : null, jsxRuntime.jsx(SafeAreaLayoutContext.Provider, { value: layout, children: jsxRuntime.jsxs(SafeAreaOverlay, { safeAreaContentRef: setSafeAreaContentEl, safeAreaInsets: safeAreaInsets ?? null, children: [children, annotationStore !== undefined ? jsxRuntime.jsx(FallbackAnnotationOverlay, { store: annotationStore }) : null, loadingIndicatorStore !== undefined ? (jsxRuntime.jsx(LoadingOverlay, { adapter: adapter, store: loadingIndicatorStore })) : null] }) })] }));
@@ -2127,13 +2128,26 @@ const MenuSearch = ({ config, resolved: _resolved }) => {
  * Purely presentational -- all rendering decisions come from resolved props.
  * `data-testid` (when set) is on the menu-item wrapper only — not duplicated on the inner `SelectField`.
  *
+ * The dropdown portals outside the menu's clipped/scrolled chrome (`overflow-clip`/`overflow-y-auto`
+ * on `PopoverContent`/`MenuContent`) so long option lists are never truncated -- same default
+ * behavior as the standalone toolbar `Select`. In fullscreen mode it portals into the map's own
+ * `customPortalId` element instead of `document.body`, since real `document.body` content is
+ * invisible while the map container is in the Fullscreen API (mirrors `PopoverContent`'s
+ * `portalId={isFullScreen ? customPortalId : undefined}` pattern).
+ *
+ * The dropdown portal always stacks at the `z-popover` layer (`SelectField`'s default), the same
+ * layer as the menu's own `PopoverContent` -- so it reliably paints on top rather than underneath
+ * the menu wherever their bounds overlap, since both portal near the top of the DOM tree outside
+ * the menu's own clipped subtree.
+ *
  * @internal
  */
-const MenuSelect = ({ config, resolved: _resolved }) => {
+const MenuSelect = ({ config, customPortalId, isFullScreen, resolved: _resolved }) => {
     const { className, "data-testid": dataTestId, id, label, onChange, options, value } = config;
+    const menuPortalTarget = isFullScreen && customPortalId !== undefined ? (document.getElementById(customPortalId) ?? undefined) : undefined;
     return (jsxRuntime.jsx("div", { className: cvaControlMenuItemBase({
             className: ["block", className],
-        }), "data-testid": dataTestId, children: jsxRuntime.jsx(reactFormComponents.SelectField, { className: undefined, "data-testid": undefined, id: id, label: label, menuPortalTarget: null, onChange: event => {
+        }), "data-testid": dataTestId, children: jsxRuntime.jsx(reactFormComponents.SelectField, { className: undefined, "data-testid": undefined, id: id, label: label, menuPortalTarget: menuPortalTarget, onChange: event => {
                 const newValue = event.target.value;
                 if (newValue !== undefined) {
                     onChange(newValue);
@@ -2217,22 +2231,6 @@ const MenuToggleGroup = ({ config, resolved }) => {
             }, isIconOnly: false, size: resolved.size }) }));
 };
 
-/**
- * Renders a menu control as a modal instead of a popover.
- * Used on narrow containers where popovers would be clipped or awkward.
- *
- * The trigger is the same IconButton used by the popover path.
- * The content is rendered inside a Modal with ModalHeader (label + close)
- * and ModalBody (scrollable menu items).
- *
- * @internal
- */
-const Modal = ({ config, resolved, children }) => {
-    const { className, "data-testid": dataTestId, label } = config;
-    const modal = reactModal.useModal({ role: "dialog" });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.IconButton, { "aria-label": label, className: className, "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), onClick: modal.open, size: resolved.size, title: label, variant: "secondary" }), jsxRuntime.jsxs(reactModal.Modal, { ...modal, "data-testid": dataTestId ? `${dataTestId}-modal` : undefined, size: "small", children: [jsxRuntime.jsx(reactModal.ModalHeader, { "data-testid": dataTestId ? `${dataTestId}-modal` : undefined, heading: label, onClickClose: modal.close }), jsxRuntime.jsx(reactModal.ModalBody, { children: children })] })] }));
-};
-
 /**
  * Renders a section header within a menu.
  * Non-interactive, purely visual grouping element.
@@ -2253,7 +2251,7 @@ const Separator = ({ className }) => (jsxRuntime.jsx("div", { className: tailwin
  * Calls resolveControl with placement: "menu" for each item.
  * The sizing middleware will always derive compact sizing for menu items.
  */
-const renderMenuItem = (item, index, availableSpace) => {
+const renderMenuItem = (item, index, availableSpace, customPortalId, isFullScreen) => {
     const resolved = resolveControl(item, { placement: "menu", availableSpace });
     switch (item.type) {
         case "separator":
@@ -2265,7 +2263,7 @@ const renderMenuItem = (item, index, availableSpace) => {
         case "button":
             return jsxRuntime.jsx(MenuButton, { config: item, resolved: resolved }, item.id);
         case "select":
-            return jsxRuntime.jsx(MenuSelect, { config: item, resolved: resolved }, item.id);
+            return (jsxRuntime.jsx(MenuSelect, { config: item, customPortalId: customPortalId, isFullScreen: isFullScreen, resolved: resolved }, item.id));
         case "radioGroup":
             return jsxRuntime.jsx(MenuRadioGroup, { config: item, resolved: resolved }, item.id);
         case "toggleGroup":
@@ -2305,53 +2303,44 @@ const groupItemsBySection = (items) => {
     return groups;
 };
 /**
- * Renders the grouped menu items with section headers.
- * Shared between the popover and modal presentation paths.
+ * Renders the grouped menu items with section headers as a plain block list inside the popover's
+ * own card styling (border, background, shadow).
  *
- * In a popover, the items need their own card styling (border, background, shadow).
- * In a modal, {@link Modal} already provides header/body chrome, so the items
- * render without additional outer card styling to avoid a nested-shell appearance.
+ * Scrolls internally (rather than on the outer `PopoverContent`) so the native scrollbar stays
+ * inside this div's own rounded border instead of riding the popover's unstyled outer edge --
+ * mirrors the cvaMenu/cvaMenuList split used elsewhere for the same reason.
  */
-const MenuContent = ({ availableSpace, items, presentation }) => {
+const MenuContent = ({ availableSpace, customPortalId, isFullScreen, items }) => {
     const groups = groupItemsBySection(items);
-    return (jsxRuntime.jsx("div", { className: presentation === "popover" ? "rounded-lg border border-neutral-300 bg-white py-1 shadow" : "py-1", role: "menu", children: groups.map((group, groupIndex) => (jsxRuntime.jsxs(react.Fragment, { children: [group.section !== undefined ? jsxRuntime.jsx(SectionHeader, { title: group.section }) : null, group.items.map((item, itemIndex) => renderMenuItem(item, groupIndex * 100 + itemIndex, availableSpace))] }, groupIndex))) }));
+    return (jsxRuntime.jsx("div", { className: "max-h-[max(40dvh,var(--spacing-64))] overflow-y-auto rounded-lg border border-neutral-300 bg-white py-1 shadow", role: "menu", children: groups.map((group, groupIndex) => (jsxRuntime.jsxs(react.Fragment, { children: [group.section !== undefined ? jsxRuntime.jsx(SectionHeader, { title: group.section }) : null, group.items.map((item, itemIndex) => renderMenuItem(item, groupIndex * 100 + itemIndex, availableSpace, customPortalId, isFullScreen))] }, groupIndex))) }));
 };
 /** Popover opens right; tooltip is suppressed while the menu is open. */
 const MenuRightPopover = ({ availableSpace, config, customPortalId, resolved, }) => {
     const { className, "data-testid": dataTestId, items, label } = config;
     const isFullScreen = reactComponents.useIsFullscreen();
-    return (jsxRuntime.jsx("div", { className: className ?? "w-fit", children: jsxRuntime.jsx(reactComponents.Popover, { placement: RIGHT_CONTROL_POPOVER_PLACEMENT, children: ({ isOpen }) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, disabled: isOpen, interactable: false, label: label, placement: RIGHT_CONTROL_TOOLTIP_PLACEMENT, children: jsxRuntime.jsx(reactComponents.IconButton, { ariaLabel: label, "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), size: resolved.size, variant: "secondary" }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { portalId: isFullScreen ? customPortalId : undefined, children: jsxRuntime.jsx(MenuContent, { availableSpace: availableSpace, items: items, presentation: "popover" }) })] })) }) }));
+    return (jsxRuntime.jsx("div", { className: className ?? "w-fit", children: jsxRuntime.jsx(reactComponents.Popover, { placement: RIGHT_CONTROL_POPOVER_PLACEMENT, children: ({ isOpen }) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Tooltip, { delayed: true, disabled: isOpen, interactable: false, label: label, placement: RIGHT_CONTROL_TOOLTIP_PLACEMENT, children: jsxRuntime.jsx(reactComponents.IconButton, { ariaLabel: label, "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), size: resolved.size, variant: "secondary" }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { className: "overflow-clip", portalId: isFullScreen ? customPortalId : undefined, children: jsxRuntime.jsx(MenuContent, { availableSpace: availableSpace, customPortalId: customPortalId, isFullScreen: isFullScreen, items: items }) })] })) }) }));
 };
-/** Popover presentation -- renders a MoreMenu with position-aware placement. */
+/** Popover presentation -- renders a position-aware popover anchored to the trigger button. */
 const MenuAutoPopover = ({ availableSpace, config, containerRef, customPortalId, resolved, }) => {
     const { className, "data-testid": dataTestId, items, label } = config;
     const isFullScreen = reactComponents.useIsFullscreen();
     const triggerRef = react.useRef(null);
     const popoverPlacement = usePopoverPlacement(triggerRef, containerRef);
-    return (jsxRuntime.jsx("div", { className: "w-fit", ref: triggerRef, children: jsxRuntime.jsx(reactComponents.MoreMenu, { className: className, customButton: jsxRuntime.jsx(reactComponents.IconButton, { "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), size: resolved.size, title: label, variant: "secondary" }), customPortalId: isFullScreen ? customPortalId : undefined, "data-testid": dataTestId, popoverProps: { placement: popoverPlacement }, children: jsxRuntime.jsx(MenuContent, { availableSpace: availableSpace, items: items, presentation: "popover" }) }) }));
+    return (jsxRuntime.jsx("div", { className: className ?? "w-fit", ref: triggerRef, children: jsxRuntime.jsxs(reactComponents.Popover, { placement: popoverPlacement, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.IconButton, { "data-testid": dataTestId, icon: jsxRuntime.jsx(reactComponents.Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), size: resolved.size, title: label, variant: "secondary" }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { className: "overflow-clip", portalId: isFullScreen ? customPortalId : undefined, children: jsxRuntime.jsx(MenuContent, { availableSpace: availableSpace, customPortalId: customPortalId, isFullScreen: isFullScreen, items: items }) })] }) }));
 };
-const MenuPopover = ({ availableSpace, config, containerRef, customPortalId, overlaySide = undefined, resolved, }) => {
-    if (overlaySide === "right") {
-        return (jsxRuntime.jsx(MenuRightPopover, { availableSpace: availableSpace, config: config, customPortalId: customPortalId, resolved: resolved }));
-    }
-    return (jsxRuntime.jsx(MenuAutoPopover, { availableSpace: availableSpace, config: config, containerRef: containerRef, customPortalId: customPortalId, resolved: resolved }));
-};
-/** Modal presentation -- renders a Modal with no popover-specific hooks. */
-const MenuModal = ({ availableSpace, config, resolved }) => (jsxRuntime.jsx(Modal, { config: config, resolved: resolved, children: jsxRuntime.jsx(MenuContent, { availableSpace: availableSpace, items: config.items, presentation: "modal" }) }));
 /**
- * Renders a menu control as either a popover or a modal,
- * depending on the `menuPresentation` prop derived from container size.
+ * Renders a menu control as a popover -- either anchored to the trigger (auto-placed) or
+ * opening to a fixed right placement, depending on `overlaySide`.
  *
- * Delegates to `MenuPopover` or `MenuModal` so each path
- * only runs the hooks it needs.
+ * Delegates to sub-components so each path only runs the hooks it needs.
  *
  * @internal
  */
-const Menu = ({ availableSpace, config, containerRef, customPortalId, menuPresentation, overlaySide = undefined, resolved, }) => {
-    if (menuPresentation === "modal") {
-        return jsxRuntime.jsx(MenuModal, { availableSpace: availableSpace, config: config, resolved: resolved });
+const Menu = ({ availableSpace, config, containerRef, customPortalId, overlaySide = undefined, resolved, }) => {
+    if (overlaySide === "right") {
+        return (jsxRuntime.jsx(MenuRightPopover, { availableSpace: availableSpace, config: config, customPortalId: customPortalId, resolved: resolved }));
     }
-    return (jsxRuntime.jsx(MenuPopover, { availableSpace: availableSpace, config: config, containerRef: containerRef, customPortalId: customPortalId, overlaySide: overlaySide, resolved: resolved }));
+    return (jsxRuntime.jsx(MenuAutoPopover, { availableSpace: availableSpace, config: config, containerRef: containerRef, customPortalId: customPortalId, resolved: resolved }));
 };
 
 const fieldConfigForStandalonePopover = (config) => {
@@ -2482,7 +2471,7 @@ const ToggleGroup = ({ config, overlaySide: _overlaySide = undefined, resolved }
  *
  * @internal
  */
-const ControlRenderer = ({ availableSpace, containerRef, control, customPortalId, menuPresentation, overlaySide = undefined, }) => {
+const ControlRenderer = ({ availableSpace, containerRef, control, customPortalId, overlaySide = undefined, }) => {
     const resolved = resolveControl(control, { placement: "standalone", availableSpace });
     switch (control.type) {
         case "button":
@@ -2501,7 +2490,7 @@ const ControlRenderer = ({ availableSpace, containerRef, control, customPortalId
         case "toggleGroup":
             return jsxRuntime.jsx(ToggleGroup, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "menu":
-            return (jsxRuntime.jsx(Menu, { availableSpace: availableSpace, config: control, containerRef: containerRef, customPortalId: customPortalId, menuPresentation: menuPresentation, overlaySide: overlaySide, resolved: resolved }));
+            return (jsxRuntime.jsx(Menu, { availableSpace: availableSpace, config: control, containerRef: containerRef, customPortalId: customPortalId, overlaySide: overlaySide, resolved: resolved }));
         case "custom":
             return jsxRuntime.jsx(Custom, { config: control, overlaySide: overlaySide, placement: "standalone", resolved: resolved });
         default: {
@@ -2543,8 +2532,6 @@ const ControlsContent = ({ api, controls: baseControlsConfig, className }) => {
     const measuredResponsiveMode = deriveResponsiveMode(breakpoints.isSm, breakpoints.isMd, containerHeight);
     const availableSpace = safeAreaLayout?.availableSpace ?? measuredAvailableSpace;
     const responsiveMode = safeAreaLayout?.responsiveMode ?? measuredResponsiveMode;
-    // Menus use modals only in collapsed mode (narrowest containers); popovers otherwise
-    const menuPresentation = responsiveMode === "collapsed" ? "modal" : "popover";
     // Derive portal ID from the map container's stable ID (set by createMapComponent)
     const portalId = api.containerRef.current?.id;
     // Geolocation position for region-appropriate globe icon (updated if the user clicks "My Location")
@@ -2580,7 +2567,7 @@ const ControlsContent = ({ api, controls: baseControlsConfig, className }) => {
         // Responsive grid: navigation bottom-right, settings top-left, tools top-right, statistics bottom-left
         "grid-cols-[1fr_auto] grid-rows-[auto_1fr_auto]", 
         // Isolate creates a new stacking context to avoid z-index issues
-        "isolate", className), "data-testid": "map-controls", ref: mergedRef, children: [hasNavigationControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto col-start-2 row-start-3 flex flex-col gap-1 self-end justify-self-end", children: navigation.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasSettingsControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto col-start-1 row-start-1 flex w-fit flex-col gap-1", "data-testid": "map-controls-settings", children: settings.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation, overlaySide: "right" }, control.id))) })) : null, hasToolsControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto col-start-2 row-start-1 flex flex-col gap-1 justify-self-end", "data-testid": "map-controls-tools", children: tools.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasStatisticsAreaContent ? (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("pointer-events-none col-start-1 row-start-3 flex max-h-full max-w-[20rem] flex-col items-start justify-end gap-1 overflow-visible", !hasStatisticsControls && "self-end"), "data-testid": "map-controls-statistics", children: [shouldRenderAnnotations ? (jsxRuntime.jsx("div", { className: "pointer-events-auto", "data-testid": "map-controls-statistics-annotations", children: jsxRuntime.jsx(AnnotationStack, { annotations: displayAnnotations, isExiting: isExiting }) })) : null, hasStatisticsControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto flex max-h-full w-fit max-w-full flex-col gap-1 overflow-auto", "data-testid": "map-controls-statistics-controls", children: statistics.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null] })) : null] }));
+        "isolate", className), "data-testid": "map-controls", ref: mergedRef, children: [hasNavigationControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto col-start-2 row-start-3 flex flex-col gap-1 self-end justify-self-end", children: navigation.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId }, control.id))) })) : null, hasSettingsControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto col-start-1 row-start-1 flex w-fit flex-col gap-1", "data-testid": "map-controls-settings", children: settings.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, overlaySide: "right" }, control.id))) })) : null, hasToolsControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto col-start-2 row-start-1 flex flex-col gap-1 justify-self-end", "data-testid": "map-controls-tools", children: tools.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId }, control.id))) })) : null, hasStatisticsAreaContent ? (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("pointer-events-none col-start-1 row-start-3 flex max-h-full max-w-[20rem] flex-col items-start justify-end gap-1 overflow-visible", !hasStatisticsControls && "self-end"), "data-testid": "map-controls-statistics", children: [shouldRenderAnnotations ? (jsxRuntime.jsx("div", { className: "pointer-events-auto", "data-testid": "map-controls-statistics-annotations", children: jsxRuntime.jsx(AnnotationStack, { annotations: displayAnnotations, isExiting: isExiting }) })) : null, hasStatisticsControls ? (jsxRuntime.jsx("div", { className: "pointer-events-auto flex max-h-full w-fit max-w-full flex-col gap-1 overflow-auto", "data-testid": "map-controls-statistics-controls", children: statistics.controls.map(control => (jsxRuntime.jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId }, control.id))) })) : null] })) : null] }));
 };
 /**
  * Map controls renderer — lays out a `ControlsConfig` across the four semantic
@@ -2686,7 +2673,7 @@ const AppearancePreviewGrid = ({ adapterConfig, options, currentTheme, currentMa
         }
         return configs;
     }, [adapterConfig, options]);
-    return (jsxRuntime.jsx("div", { className: "flex items-start gap-2 overflow-x-auto px-3 py-2", role: "radiogroup", children: options.map(option => {
+    return (jsxRuntime.jsx("div", { className: "flex flex-wrap items-start gap-2 px-3 py-2", role: "radiogroup", children: options.map(option => {
             const derivedConfig = derivedConfigs.get(option.theme);
             if (derivedConfig === undefined) {
                 return null;

package/index.esm.js

@@ -11,7 +11,6 @@ import { createPortal } from 'react-dom';
 import { isEqual } from 'es-toolkit';
 import { useGeolocation } from '@trackunit/react-core-hooks';
 import { Checkbox, ToggleSwitch, RadioGroup as RadioGroup$1, RadioItem, FormGroup, Search as Search$1, SelectField, BaseSelect } from '@trackunit/react-form-components';
-import { useModal, Modal as Modal$1, ModalHeader, ModalBody } from '@trackunit/react-modal';
 import { z } from 'zod';
 import { PieChart } from 'react-minimal-pie-chart';
 import { tailwindPalette } from '@trackunit/ui-design-tokens';
@@ -37,6 +36,7 @@ var defaultTranslations = {
 	"map.loadingData": "Loading map data",
 	"map.loadingErrorMessage": "Unable to load the map. Please try again later.",
 	"multiGeometry.badge.tooltip": "Part of a multi-part shape",
+	"panels.close": "Close",
 	"settings.mapStyle.dark": "Dark",
 	"settings.mapStyle.light": "Light",
 	"settings.mapStyle.roadmap": "Road map",
@@ -1179,13 +1179,14 @@ const createMapComponent = ({ adapter, Renderer, adapterName, containerRefHolder
         const containerHeight = geometry?.height ?? Infinity;
         const availableSpace = breakpoints.isSm && containerHeight >= HEIGHT_COMFORTABLE_THRESHOLD ? "comfortable" : "constrained";
         const responsiveMode = deriveResponsiveMode(breakpoints.isSm, breakpoints.isMd, containerHeight);
+        const [safeAreaContentEl, setSafeAreaContentEl] = useState(null);
+        const [safeAreaPanelPortalEl, setSafeAreaPanelPortalEl] = useState(null);
         const layout = useMemo(() => ({
             availableSpace,
             responsiveMode,
-        }), [availableSpace, responsiveMode]);
+            safeAreaContentEl,
+        }), [availableSpace, responsiveMode, safeAreaContentEl]);
         const mapMoveSource = useMemo(() => ({ on: adapter.on.bind(adapter) }), []);
-        const [safeAreaContentEl, setSafeAreaContentEl] = useState(null);
-        const [safeAreaPanelPortalEl, setSafeAreaPanelPortalEl] = useState(null);
         const content = (jsxs("div", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ?? "Interactive map", className: twMerge(
             // ZStack: full-size grid with a single cell so children overlay the map
             "isolate grid h-full w-full grid-cols-1 grid-rows-1", className), "data-testid": dataTestId, id: containerId, ref: mergedRef, role: "application", style: style, tabIndex: 0, children: [jsxs("div", { className: "relative col-start-1 row-start-1 grid h-full min-h-[200px] w-full", children: [jsx(Renderer, { adapterInstance: adapter, className: "h-full w-full", style: { height: "100%", width: "100%" } }), jsx(AdapterReadinessOverlay, { adapter: adapter })] }), jsx("div", { className: "pointer-events-none absolute inset-0 col-start-1 row-start-1 overflow-visible", "data-testid": "map-marker-overlay-portal" }), jsx("div", { className: "pointer-events-none relative isolate col-start-1 row-start-1 h-full min-h-0 w-full overflow-clip", "data-testid": "map-panel-overlay-portal", ref: setSafeAreaPanelPortalEl }), panelStore !== undefined ? (jsx(PanelOrchestrator, { anchoredPortalEl: safeAreaPanelPortalEl, containerEl: safeAreaContentEl ?? containerEl, mapMoveSource: mapMoveSource, store: panelStore })) : null, jsx(SafeAreaLayoutContext.Provider, { value: layout, children: jsxs(SafeAreaOverlay, { safeAreaContentRef: setSafeAreaContentEl, safeAreaInsets: safeAreaInsets ?? null, children: [children, annotationStore !== undefined ? jsx(FallbackAnnotationOverlay, { store: annotationStore }) : null, loadingIndicatorStore !== undefined ? (jsx(LoadingOverlay, { adapter: adapter, store: loadingIndicatorStore })) : null] }) })] }));
@@ -2126,13 +2127,26 @@ const MenuSearch = ({ config, resolved: _resolved }) => {
  * Purely presentational -- all rendering decisions come from resolved props.
  * `data-testid` (when set) is on the menu-item wrapper only — not duplicated on the inner `SelectField`.
  *
+ * The dropdown portals outside the menu's clipped/scrolled chrome (`overflow-clip`/`overflow-y-auto`
+ * on `PopoverContent`/`MenuContent`) so long option lists are never truncated -- same default
+ * behavior as the standalone toolbar `Select`. In fullscreen mode it portals into the map's own
+ * `customPortalId` element instead of `document.body`, since real `document.body` content is
+ * invisible while the map container is in the Fullscreen API (mirrors `PopoverContent`'s
+ * `portalId={isFullScreen ? customPortalId : undefined}` pattern).
+ *
+ * The dropdown portal always stacks at the `z-popover` layer (`SelectField`'s default), the same
+ * layer as the menu's own `PopoverContent` -- so it reliably paints on top rather than underneath
+ * the menu wherever their bounds overlap, since both portal near the top of the DOM tree outside
+ * the menu's own clipped subtree.
+ *
  * @internal
  */
-const MenuSelect = ({ config, resolved: _resolved }) => {
+const MenuSelect = ({ config, customPortalId, isFullScreen, resolved: _resolved }) => {
     const { className, "data-testid": dataTestId, id, label, onChange, options, value } = config;
+    const menuPortalTarget = isFullScreen && customPortalId !== undefined ? (document.getElementById(customPortalId) ?? undefined) : undefined;
     return (jsx("div", { className: cvaControlMenuItemBase({
             className: ["block", className],
-        }), "data-testid": dataTestId, children: jsx(SelectField, { className: undefined, "data-testid": undefined, id: id, label: label, menuPortalTarget: null, onChange: event => {
+        }), "data-testid": dataTestId, children: jsx(SelectField, { className: undefined, "data-testid": undefined, id: id, label: label, menuPortalTarget: menuPortalTarget, onChange: event => {
                 const newValue = event.target.value;
                 if (newValue !== undefined) {
                     onChange(newValue);
@@ -2216,22 +2230,6 @@ const MenuToggleGroup = ({ config, resolved }) => {
             }, isIconOnly: false, size: resolved.size }) }));
 };
 
-/**
- * Renders a menu control as a modal instead of a popover.
- * Used on narrow containers where popovers would be clipped or awkward.
- *
- * The trigger is the same IconButton used by the popover path.
- * The content is rendered inside a Modal with ModalHeader (label + close)
- * and ModalBody (scrollable menu items).
- *
- * @internal
- */
-const Modal = ({ config, resolved, children }) => {
-    const { className, "data-testid": dataTestId, label } = config;
-    const modal = useModal({ role: "dialog" });
-    return (jsxs(Fragment, { children: [jsx(IconButton, { "aria-label": label, className: className, "data-testid": dataTestId, icon: jsx(Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), onClick: modal.open, size: resolved.size, title: label, variant: "secondary" }), jsxs(Modal$1, { ...modal, "data-testid": dataTestId ? `${dataTestId}-modal` : undefined, size: "small", children: [jsx(ModalHeader, { "data-testid": dataTestId ? `${dataTestId}-modal` : undefined, heading: label, onClickClose: modal.close }), jsx(ModalBody, { children: children })] })] }));
-};
-
 /**
  * Renders a section header within a menu.
  * Non-interactive, purely visual grouping element.
@@ -2252,7 +2250,7 @@ const Separator = ({ className }) => (jsx("div", { className: twMerge("my-1 h-px
  * Calls resolveControl with placement: "menu" for each item.
  * The sizing middleware will always derive compact sizing for menu items.
  */
-const renderMenuItem = (item, index, availableSpace) => {
+const renderMenuItem = (item, index, availableSpace, customPortalId, isFullScreen) => {
     const resolved = resolveControl(item, { placement: "menu", availableSpace });
     switch (item.type) {
         case "separator":
@@ -2264,7 +2262,7 @@ const renderMenuItem = (item, index, availableSpace) => {
         case "button":
             return jsx(MenuButton, { config: item, resolved: resolved }, item.id);
         case "select":
-            return jsx(MenuSelect, { config: item, resolved: resolved }, item.id);
+            return (jsx(MenuSelect, { config: item, customPortalId: customPortalId, isFullScreen: isFullScreen, resolved: resolved }, item.id));
         case "radioGroup":
             return jsx(MenuRadioGroup, { config: item, resolved: resolved }, item.id);
         case "toggleGroup":
@@ -2304,53 +2302,44 @@ const groupItemsBySection = (items) => {
     return groups;
 };
 /**
- * Renders the grouped menu items with section headers.
- * Shared between the popover and modal presentation paths.
+ * Renders the grouped menu items with section headers as a plain block list inside the popover's
+ * own card styling (border, background, shadow).
  *
- * In a popover, the items need their own card styling (border, background, shadow).
- * In a modal, {@link Modal} already provides header/body chrome, so the items
- * render without additional outer card styling to avoid a nested-shell appearance.
+ * Scrolls internally (rather than on the outer `PopoverContent`) so the native scrollbar stays
+ * inside this div's own rounded border instead of riding the popover's unstyled outer edge --
+ * mirrors the cvaMenu/cvaMenuList split used elsewhere for the same reason.
  */
-const MenuContent = ({ availableSpace, items, presentation }) => {
+const MenuContent = ({ availableSpace, customPortalId, isFullScreen, items }) => {
     const groups = groupItemsBySection(items);
-    return (jsx("div", { className: presentation === "popover" ? "rounded-lg border border-neutral-300 bg-white py-1 shadow" : "py-1", role: "menu", children: groups.map((group, groupIndex) => (jsxs(Fragment$1, { children: [group.section !== undefined ? jsx(SectionHeader, { title: group.section }) : null, group.items.map((item, itemIndex) => renderMenuItem(item, groupIndex * 100 + itemIndex, availableSpace))] }, groupIndex))) }));
+    return (jsx("div", { className: "max-h-[max(40dvh,var(--spacing-64))] overflow-y-auto rounded-lg border border-neutral-300 bg-white py-1 shadow", role: "menu", children: groups.map((group, groupIndex) => (jsxs(Fragment$1, { children: [group.section !== undefined ? jsx(SectionHeader, { title: group.section }) : null, group.items.map((item, itemIndex) => renderMenuItem(item, groupIndex * 100 + itemIndex, availableSpace, customPortalId, isFullScreen))] }, groupIndex))) }));
 };
 /** Popover opens right; tooltip is suppressed while the menu is open. */
 const MenuRightPopover = ({ availableSpace, config, customPortalId, resolved, }) => {
     const { className, "data-testid": dataTestId, items, label } = config;
     const isFullScreen = useIsFullscreen();
-    return (jsx("div", { className: className ?? "w-fit", children: jsx(Popover, { placement: RIGHT_CONTROL_POPOVER_PLACEMENT, children: ({ isOpen }) => (jsxs(Fragment$1, { children: [jsx(PopoverTrigger, { children: jsx(Tooltip, { delayed: true, disabled: isOpen, interactable: false, label: label, placement: RIGHT_CONTROL_TOOLTIP_PLACEMENT, children: jsx(IconButton, { ariaLabel: label, "data-testid": dataTestId, icon: jsx(Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), size: resolved.size, variant: "secondary" }) }) }), jsx(PopoverContent, { portalId: isFullScreen ? customPortalId : undefined, children: jsx(MenuContent, { availableSpace: availableSpace, items: items, presentation: "popover" }) })] })) }) }));
+    return (jsx("div", { className: className ?? "w-fit", children: jsx(Popover, { placement: RIGHT_CONTROL_POPOVER_PLACEMENT, children: ({ isOpen }) => (jsxs(Fragment$1, { children: [jsx(PopoverTrigger, { children: jsx(Tooltip, { delayed: true, disabled: isOpen, interactable: false, label: label, placement: RIGHT_CONTROL_TOOLTIP_PLACEMENT, children: jsx(IconButton, { ariaLabel: label, "data-testid": dataTestId, icon: jsx(Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), size: resolved.size, variant: "secondary" }) }) }), jsx(PopoverContent, { className: "overflow-clip", portalId: isFullScreen ? customPortalId : undefined, children: jsx(MenuContent, { availableSpace: availableSpace, customPortalId: customPortalId, isFullScreen: isFullScreen, items: items }) })] })) }) }));
 };
-/** Popover presentation -- renders a MoreMenu with position-aware placement. */
+/** Popover presentation -- renders a position-aware popover anchored to the trigger button. */
 const MenuAutoPopover = ({ availableSpace, config, containerRef, customPortalId, resolved, }) => {
     const { className, "data-testid": dataTestId, items, label } = config;
     const isFullScreen = useIsFullscreen();
     const triggerRef = useRef(null);
     const popoverPlacement = usePopoverPlacement(triggerRef, containerRef);
-    return (jsx("div", { className: "w-fit", ref: triggerRef, children: jsx(MoreMenu, { className: className, customButton: jsx(IconButton, { "data-testid": dataTestId, icon: jsx(Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), size: resolved.size, title: label, variant: "secondary" }), customPortalId: isFullScreen ? customPortalId : undefined, "data-testid": dataTestId, popoverProps: { placement: popoverPlacement }, children: jsx(MenuContent, { availableSpace: availableSpace, items: items, presentation: "popover" }) }) }));
+    return (jsx("div", { className: className ?? "w-fit", ref: triggerRef, children: jsxs(Popover, { placement: popoverPlacement, children: [jsx(PopoverTrigger, { children: jsx(IconButton, { "data-testid": dataTestId, icon: jsx(Icon, { name: resolved.icon ?? "QuestionMarkCircle", size: "small" }), size: resolved.size, title: label, variant: "secondary" }) }), jsx(PopoverContent, { className: "overflow-clip", portalId: isFullScreen ? customPortalId : undefined, children: jsx(MenuContent, { availableSpace: availableSpace, customPortalId: customPortalId, isFullScreen: isFullScreen, items: items }) })] }) }));
 };
-const MenuPopover = ({ availableSpace, config, containerRef, customPortalId, overlaySide = undefined, resolved, }) => {
-    if (overlaySide === "right") {
-        return (jsx(MenuRightPopover, { availableSpace: availableSpace, config: config, customPortalId: customPortalId, resolved: resolved }));
-    }
-    return (jsx(MenuAutoPopover, { availableSpace: availableSpace, config: config, containerRef: containerRef, customPortalId: customPortalId, resolved: resolved }));
-};
-/** Modal presentation -- renders a Modal with no popover-specific hooks. */
-const MenuModal = ({ availableSpace, config, resolved }) => (jsx(Modal, { config: config, resolved: resolved, children: jsx(MenuContent, { availableSpace: availableSpace, items: config.items, presentation: "modal" }) }));
 /**
- * Renders a menu control as either a popover or a modal,
- * depending on the `menuPresentation` prop derived from container size.
+ * Renders a menu control as a popover -- either anchored to the trigger (auto-placed) or
+ * opening to a fixed right placement, depending on `overlaySide`.
  *
- * Delegates to `MenuPopover` or `MenuModal` so each path
- * only runs the hooks it needs.
+ * Delegates to sub-components so each path only runs the hooks it needs.
  *
  * @internal
  */
-const Menu = ({ availableSpace, config, containerRef, customPortalId, menuPresentation, overlaySide = undefined, resolved, }) => {
-    if (menuPresentation === "modal") {
-        return jsx(MenuModal, { availableSpace: availableSpace, config: config, resolved: resolved });
+const Menu = ({ availableSpace, config, containerRef, customPortalId, overlaySide = undefined, resolved, }) => {
+    if (overlaySide === "right") {
+        return (jsx(MenuRightPopover, { availableSpace: availableSpace, config: config, customPortalId: customPortalId, resolved: resolved }));
     }
-    return (jsx(MenuPopover, { availableSpace: availableSpace, config: config, containerRef: containerRef, customPortalId: customPortalId, overlaySide: overlaySide, resolved: resolved }));
+    return (jsx(MenuAutoPopover, { availableSpace: availableSpace, config: config, containerRef: containerRef, customPortalId: customPortalId, resolved: resolved }));
 };
 
 const fieldConfigForStandalonePopover = (config) => {
@@ -2481,7 +2470,7 @@ const ToggleGroup = ({ config, overlaySide: _overlaySide = undefined, resolved }
  *
  * @internal
  */
-const ControlRenderer = ({ availableSpace, containerRef, control, customPortalId, menuPresentation, overlaySide = undefined, }) => {
+const ControlRenderer = ({ availableSpace, containerRef, control, customPortalId, overlaySide = undefined, }) => {
     const resolved = resolveControl(control, { placement: "standalone", availableSpace });
     switch (control.type) {
         case "button":
@@ -2500,7 +2489,7 @@ const ControlRenderer = ({ availableSpace, containerRef, control, customPortalId
         case "toggleGroup":
             return jsx(ToggleGroup, { config: control, overlaySide: overlaySide, resolved: resolved });
         case "menu":
-            return (jsx(Menu, { availableSpace: availableSpace, config: control, containerRef: containerRef, customPortalId: customPortalId, menuPresentation: menuPresentation, overlaySide: overlaySide, resolved: resolved }));
+            return (jsx(Menu, { availableSpace: availableSpace, config: control, containerRef: containerRef, customPortalId: customPortalId, overlaySide: overlaySide, resolved: resolved }));
         case "custom":
             return jsx(Custom, { config: control, overlaySide: overlaySide, placement: "standalone", resolved: resolved });
         default: {
@@ -2542,8 +2531,6 @@ const ControlsContent = ({ api, controls: baseControlsConfig, className }) => {
     const measuredResponsiveMode = deriveResponsiveMode(breakpoints.isSm, breakpoints.isMd, containerHeight);
     const availableSpace = safeAreaLayout?.availableSpace ?? measuredAvailableSpace;
     const responsiveMode = safeAreaLayout?.responsiveMode ?? measuredResponsiveMode;
-    // Menus use modals only in collapsed mode (narrowest containers); popovers otherwise
-    const menuPresentation = responsiveMode === "collapsed" ? "modal" : "popover";
     // Derive portal ID from the map container's stable ID (set by createMapComponent)
     const portalId = api.containerRef.current?.id;
     // Geolocation position for region-appropriate globe icon (updated if the user clicks "My Location")
@@ -2579,7 +2566,7 @@ const ControlsContent = ({ api, controls: baseControlsConfig, className }) => {
         // Responsive grid: navigation bottom-right, settings top-left, tools top-right, statistics bottom-left
         "grid-cols-[1fr_auto] grid-rows-[auto_1fr_auto]", 
         // Isolate creates a new stacking context to avoid z-index issues
-        "isolate", className), "data-testid": "map-controls", ref: mergedRef, children: [hasNavigationControls ? (jsx("div", { className: "pointer-events-auto col-start-2 row-start-3 flex flex-col gap-1 self-end justify-self-end", children: navigation.controls.map(control => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasSettingsControls ? (jsx("div", { className: "pointer-events-auto col-start-1 row-start-1 flex w-fit flex-col gap-1", "data-testid": "map-controls-settings", children: settings.controls.map(control => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation, overlaySide: "right" }, control.id))) })) : null, hasToolsControls ? (jsx("div", { className: "pointer-events-auto col-start-2 row-start-1 flex flex-col gap-1 justify-self-end", "data-testid": "map-controls-tools", children: tools.controls.map(control => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null, hasStatisticsAreaContent ? (jsxs("div", { className: twMerge("pointer-events-none col-start-1 row-start-3 flex max-h-full max-w-[20rem] flex-col items-start justify-end gap-1 overflow-visible", !hasStatisticsControls && "self-end"), "data-testid": "map-controls-statistics", children: [shouldRenderAnnotations ? (jsx("div", { className: "pointer-events-auto", "data-testid": "map-controls-statistics-annotations", children: jsx(AnnotationStack, { annotations: displayAnnotations, isExiting: isExiting }) })) : null, hasStatisticsControls ? (jsx("div", { className: "pointer-events-auto flex max-h-full w-fit max-w-full flex-col gap-1 overflow-auto", "data-testid": "map-controls-statistics-controls", children: statistics.controls.map(control => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, menuPresentation: menuPresentation }, control.id))) })) : null] })) : null] }));
+        "isolate", className), "data-testid": "map-controls", ref: mergedRef, children: [hasNavigationControls ? (jsx("div", { className: "pointer-events-auto col-start-2 row-start-3 flex flex-col gap-1 self-end justify-self-end", children: navigation.controls.map(control => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId }, control.id))) })) : null, hasSettingsControls ? (jsx("div", { className: "pointer-events-auto col-start-1 row-start-1 flex w-fit flex-col gap-1", "data-testid": "map-controls-settings", children: settings.controls.map(control => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId, overlaySide: "right" }, control.id))) })) : null, hasToolsControls ? (jsx("div", { className: "pointer-events-auto col-start-2 row-start-1 flex flex-col gap-1 justify-self-end", "data-testid": "map-controls-tools", children: tools.controls.map(control => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId }, control.id))) })) : null, hasStatisticsAreaContent ? (jsxs("div", { className: twMerge("pointer-events-none col-start-1 row-start-3 flex max-h-full max-w-[20rem] flex-col items-start justify-end gap-1 overflow-visible", !hasStatisticsControls && "self-end"), "data-testid": "map-controls-statistics", children: [shouldRenderAnnotations ? (jsx("div", { className: "pointer-events-auto", "data-testid": "map-controls-statistics-annotations", children: jsx(AnnotationStack, { annotations: displayAnnotations, isExiting: isExiting }) })) : null, hasStatisticsControls ? (jsx("div", { className: "pointer-events-auto flex max-h-full w-fit max-w-full flex-col gap-1 overflow-auto", "data-testid": "map-controls-statistics-controls", children: statistics.controls.map(control => (jsx(ControlRenderer, { availableSpace: availableSpace, containerRef: containerRef, control: control, customPortalId: portalId }, control.id))) })) : null] })) : null] }));
 };
 /**
  * Map controls renderer — lays out a `ControlsConfig` across the four semantic
@@ -2685,7 +2672,7 @@ const AppearancePreviewGrid = ({ adapterConfig, options, currentTheme, currentMa
         }
         return configs;
     }, [adapterConfig, options]);
-    return (jsx("div", { className: "flex items-start gap-2 overflow-x-auto px-3 py-2", role: "radiogroup", children: options.map(option => {
+    return (jsx("div", { className: "flex flex-wrap items-start gap-2 px-3 py-2", role: "radiogroup", children: options.map(option => {
             const derivedConfig = derivedConfigs.get(option.theme);
             if (derivedConfig === undefined) {
                 return null;

package/package.json

@@ -1,23 +1,22 @@
 {
   "name": "@trackunit/react-map",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.2.0",
-    "@trackunit/css-class-variance-utilities": "1.13.59",
-    "@trackunit/react-form-components": "2.2.1",
-    "@trackunit/react-core-hooks": "1.18.0",
-    "@trackunit/geo-json-utils": "1.14.62",
-    "@trackunit/i18n-library-translation": "2.1.0",
-    "@trackunit/react-modal": "2.2.1",
+    "@trackunit/react-components": "2.2.1",
+    "@trackunit/css-class-variance-utilities": "1.13.60",
+    "@trackunit/react-form-components": "2.2.2",
+    "@trackunit/react-core-hooks": "1.18.1",
+    "@trackunit/geo-json-utils": "1.14.63",
+    "@trackunit/i18n-library-translation": "2.1.1",
     "react-minimal-pie-chart": "^8.4.0",
-    "@trackunit/react-map-adapter-shared": "0.0.43",
-    "@trackunit/react-map-color-utils": "0.0.28",
-    "@trackunit/ui-design-tokens": "1.13.58",
+    "@trackunit/react-map-adapter-shared": "0.0.44",
+    "@trackunit/react-map-color-utils": "0.0.29",
+    "@trackunit/ui-design-tokens": "1.13.59",
     "@floating-ui/react": "^0.26.25",
     "es-toolkit": "^1.39.10",
     "tailwind-merge": "^2.0.0",

package/src/controls/ControlRenderer.d.ts

@@ -1,14 +1,13 @@
 import type { ComponentRef, RefObject } from "react";
 import type { ControlOverlaySide } from "./controlOverlaySide";
 import { type AvailableSpace } from "./renderingRules";
-import type { ControlConfig, MenuPresentation } from "./types";
+import type { ControlConfig } from "./types";
 type ControlRendererProps = Readonly<{
     availableSpace: AvailableSpace;
     /** Ref to the controls overlay container, used to compute popover placement */
     containerRef: RefObject<ComponentRef<"div"> | null>;
     control: ControlConfig;
     customPortalId?: string;
-    menuPresentation: MenuPresentation;
     overlaySide?: ControlOverlaySide;
 }>;
 /**
@@ -18,5 +17,5 @@ type ControlRendererProps = Readonly<{
  *
  * @internal
  */
-export declare const ControlRenderer: ({ availableSpace, containerRef, control, customPortalId, menuPresentation, overlaySide, }: ControlRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlRenderer: ({ availableSpace, containerRef, control, customPortalId, overlaySide, }: ControlRendererProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/controls/renderers/menu/Menu.d.ts

@@ -1,25 +1,23 @@
 import { type ComponentRef, type RefObject } from "react";
 import { type ControlOverlaySide } from "../../controlOverlaySide";
 import { type AvailableSpace, type ResolvedControlProps } from "../../renderingRules";
-import type { MenuControlConfig, MenuPresentation } from "../../types";
+import type { MenuControlConfig } from "../../types";
 type MenuProps = Readonly<{
     availableSpace: AvailableSpace;
     config: MenuControlConfig;
     /** Ref to the controls overlay container, used to compute popover placement */
     containerRef: RefObject<ComponentRef<"div"> | null>;
     customPortalId?: string;
-    menuPresentation: MenuPresentation;
     overlaySide?: ControlOverlaySide;
     resolved: ResolvedControlProps;
 }>;
 /**
- * Renders a menu control as either a popover or a modal,
- * depending on the `menuPresentation` prop derived from container size.
+ * Renders a menu control as a popover -- either anchored to the trigger (auto-placed) or
+ * opening to a fixed right placement, depending on `overlaySide`.
  *
- * Delegates to `MenuPopover` or `MenuModal` so each path
- * only runs the hooks it needs.
+ * Delegates to sub-components so each path only runs the hooks it needs.
  *
  * @internal
  */
-export declare const Menu: ({ availableSpace, config, containerRef, customPortalId, menuPresentation, overlaySide, resolved, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Menu: ({ availableSpace, config, containerRef, customPortalId, overlaySide, resolved, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/controls/renderers/select/MenuSelect.d.ts

@@ -2,6 +2,8 @@ import { type ResolvedControlProps } from "../../renderingRules";
 import type { SelectControlConfig } from "../../types";
 type MenuSelectProps = Readonly<{
     config: SelectControlConfig;
+    customPortalId?: string;
+    isFullScreen: boolean;
     resolved: ResolvedControlProps;
 }>;
 /**
@@ -9,7 +11,19 @@ type MenuSelectProps = Readonly<{
  * Purely presentational -- all rendering decisions come from resolved props.
  * `data-testid` (when set) is on the menu-item wrapper only — not duplicated on the inner `SelectField`.
  *
+ * The dropdown portals outside the menu's clipped/scrolled chrome (`overflow-clip`/`overflow-y-auto`
+ * on `PopoverContent`/`MenuContent`) so long option lists are never truncated -- same default
+ * behavior as the standalone toolbar `Select`. In fullscreen mode it portals into the map's own
+ * `customPortalId` element instead of `document.body`, since real `document.body` content is
+ * invisible while the map container is in the Fullscreen API (mirrors `PopoverContent`'s
+ * `portalId={isFullScreen ? customPortalId : undefined}` pattern).
+ *
+ * The dropdown portal always stacks at the `z-popover` layer (`SelectField`'s default), the same
+ * layer as the menu's own `PopoverContent` -- so it reliably paints on top rather than underneath
+ * the menu wherever their bounds overlap, since both portal near the top of the DOM tree outside
+ * the menu's own clipped subtree.
+ *
  * @internal
  */
-export declare const MenuSelect: ({ config, resolved: _resolved }: MenuSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuSelect: ({ config, customPortalId, isFullScreen, resolved: _resolved }: MenuSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/controls/types.d.ts

@@ -350,17 +350,6 @@ export interface BuiltInControlsConfig extends ControlsConfig {
     readonly navigation: BuiltInNavigationConfig;
     readonly settings: BuiltInSettingsConfig;
 }
-/**
- * How a menu presents its content.
- *
- * - `"popover"` — floating `MoreMenu` popover anchored to the trigger button.
- * - `"modal"` — bottom `Sheet` dialog (`variant="modal"`) with a backdrop.
- *
- * `Controls` derives this from `availableSpace`: `"constrained"` containers get
- * `"modal"` (Sheet bottom-sheet, better on small screens); `"comfortable"` containers
- * get `"popover"` (floating popover, better when there is room).
- */
-export type MenuPresentation = "popover" | "modal";
 /**
  * How aggressively controls are collapsed based on available space.
  *

package/src/core/SafeAreaLayoutContext.d.ts

@@ -2,4 +2,11 @@ import type { AvailableSpace, ResponsiveMode } from "../controls/types";
 export declare const SafeAreaLayoutContext: import("react").Context<Readonly<{
     availableSpace: AvailableSpace;
     responsiveMode: ResponsiveMode;
+    /**
+     * The inner content node of `SafeAreaOverlay` — the `relative` grid div whose border box
+     * equals the padded usable area. Sheet portals that should respect adapter safe-area insets
+     * (e.g. the Controls menu Sheet) should use this as their `container` prop so they do not
+     * paint over the attribution bar.
+     */
+    safeAreaContentEl: HTMLDivElement | null;
 }> | null>;

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"]}

package/src/controls/renderers/menu/Modal.d.ts

@@ -1,21 +0,0 @@
-import type { ReactNode } from "react";
-import type { ResolvedControlProps } from "../../renderingRules";
-import type { MenuControlConfig } from "../../types";
-type ModalProps = Readonly<{
-    config: MenuControlConfig;
-    resolved: ResolvedControlProps;
-    /** The menu content (grouped sections and items) to render inside the modal body */
-    children: ReactNode;
-}>;
-/**
- * Renders a menu control as a modal instead of a popover.
- * Used on narrow containers where popovers would be clipped or awkward.
- *
- * The trigger is the same IconButton used by the popover path.
- * The content is rendered inside a Modal with ModalHeader (label + close)
- * and ModalBody (scrollable menu items).
- *
- * @internal
- */
-export declare const Modal: ({ config, resolved, children }: ModalProps) => import("react/jsx-runtime").JSX.Element;
-export {};