react-native-roster 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-roster",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Layered intervals with provenance across lanes and a shared time axis for React Native.",
   "keywords": [
     "react-native",
@@ -31,7 +31,8 @@
   "types": "./dist/src/index.d.ts",
   "browser": {
     "./dist/src/components/primitives/press-point.js": "./dist/src/components/primitives/press-point.web.js",
-    "./dist/src/components/roster/lanes/interval-hover.js": "./dist/src/components/roster/lanes/interval-hover.web.js"
+    "./dist/src/components/roster/lanes/interval-hover.js": "./dist/src/components/roster/lanes/interval-hover.web.js",
+    "./dist/src/components/roster/selection/selection-layout.js": "./dist/src/components/roster/selection/selection-layout.web.js"
   },
   "exports": {
     ".": {
@@ -101,7 +102,8 @@
     "nativewind": ">=4.1.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
-    "react-native-reanimated": ">=3.19.0"
+    "react-native-reanimated": ">=3.19.0",
+    "@radix-ui/react-popover": "^1.1.23"
   },
   "peerDependenciesMeta": {
     "expo": {
@@ -112,6 +114,9 @@
     },
     "react-native-reanimated": {
       "optional": true
+    },
+    "@radix-ui/react-popover": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -150,7 +155,8 @@
     "semantic-release": "^25.0.3",
     "semver": "^7.7.0",
     "size-limit": "^13.0.3",
-    "temporal-spec": "1.0.1"
+    "temporal-spec": "1.0.1",
+    "@radix-ui/react-popover": "1.1.23"
   },
   "publishConfig": {
     "access": "public",

package/src/components/primitives/README.md

@@ -1,7 +1,6 @@
 # primitives
 
-Hookless building blocks shared by Roster and Schedule. Nothing here is a
-public export.
+Building blocks shared by the projections, plus the native portal store for Roster selection.
 
 - `press-point.tsx`, `press-point.web.tsx`, `press-point.types.ts`: pointer
   coordinates relative to the pressed surface; the web file is selected by the
@@ -10,3 +9,15 @@ public export.
   default paint when the override carries a NativeWind class entry
 
 Tests: `test/components/primitives`.
+
+- `portal.tsx`: root-exported `PortalHost({name})` and
+  `Portal({hostName,name,children})`; a module-level Map of hosts to portal nodes,
+  subscribed through useSyncExternalStore, registered and removed through lifecycle effects
+
+Mount one host per destination name. The default Roster selection layout owns its
+per-instance host; custom layouts can target an ancestor host they own. Caller
+context does not cross the store; provide it above the host or inside the node.
+Schedule does not yet support selection.
+
+As a primitive, `Portal` takes `children` rather than a named zone; named zones belong
+to the machine and feature tiers.

package/src/components/primitives/portal.tsx

@@ -0,0 +1,48 @@
+import { Fragment, type ReactNode, useEffect, useSyncExternalStore } from 'react';
+
+const hosts = new Map<string, Map<string, ReactNode>>();
+const listeners = new Set<() => void>();
+const empty = new Map<string, ReactNode>();
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function publish(hostName: string, nodes: Map<string, ReactNode>) {
+  if (nodes.size) hosts.set(hostName, nodes);
+  else hosts.delete(hostName);
+  for (const listener of listeners) listener();
+}
+
+/** Mount once at the destination for a named native portal. */
+export function PortalHost({ name }: { name: string }) {
+  const nodes = useSyncExternalStore(
+    subscribe,
+    () => hosts.get(name) ?? empty,
+    () => empty,
+  );
+  return Array.from(nodes, ([key, node]) => <Fragment key={key}>{node}</Fragment>);
+}
+
+/** Register content at a named native host; caller context does not cross the store. */
+export function Portal({
+  hostName,
+  name,
+  children,
+}: {
+  hostName: string;
+  name: string;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    const nodes = new Map(hosts.get(hostName));
+    nodes.set(name, children);
+    publish(hostName, nodes);
+    return () => {
+      const nodes = new Map(hosts.get(hostName));
+      nodes.delete(name);
+      publish(hostName, nodes);
+    };
+  }, [hostName, name, children]);
+  return null;
+}

package/src/components/roster/README.md

@@ -6,7 +6,8 @@ This feature is about a roster; its children are lanes.
   `XxxInput` slot input type from `roster.types.ts`
 
 - `index.tsx`: the chassis; calls `useRoster`, branches on `status`, composes zones
-- `use-roster.ts`: the hook; owns window, projection, scroll, geometry, and press
+- `use-roster.ts`: the hook; owns window, projection, scroll, geometry, and selection
+- `use-roster-press.ts`: isolates the stable press ref so React Compiler can retain derived body inputs
 - `layout.tsx`: arranges corner, header, label column, and body regions only
 - `roster.types.ts`: props, model, and every slot input type
 - `body-layout.tsx`: arranges grid and list nodes with horizontal scroll wiring
@@ -19,7 +20,7 @@ Interval and gap components live in `../layers`; press geometry and `regionStyle
 in `../primitives`. Zone contracts are documented in the README's Roster zones
 section and in `llms.txt`. Tests: `test/components/roster`.
 
-This feature is about a roster body; its children are lanes. `RosterBody` gates
+`RosterBody` gates
 measurement and composes the body layout and lane list. The `onRowRender` prop on
 `RosterBody` and `RosterLaneList` is a development-only Profiler hook used by the
 gallery, not a supported customization point. Production Profiler callbacks are disabled.
@@ -27,3 +28,48 @@ gallery, not a supported customization point. Production Profiler callbacks are
 Input-bearing slots accept component types and mount in the data-owning parts.
 The chassis binds defaults once; emptyZone and cornerZone accept nodes. The body
 content key tracks interval and gap component identity, including class components.
+
+`selection/` holds the runtime-swappable presentation strategies (native popover, web popover) for one `SelectionLayoutProps` contract.
+
+- `selection/selection-layout.types.ts`: exported `SelectionLayoutProps`, with body
+  and detail nodes, targetBounds, open, dismissal, host name, and shared scroll
+  limited to x, y, headerStyle, and labelStyle
+- `selection/selection-layout.tsx`: exported native `RosterSelectionPopover`, local
+  portal host, body press passthrough, hardware back, measured viewport clamping, and shared scroll positioning
+- `selection/selection-layout.web.tsx`: Radix presentation with a browser remap
+
+`intervalDetailComponent` receives `IntervalDetailInput`, the interval input plus absolute
+`start`, `end`, and `viewTimezone`; presses still invoke onIntervalPress.
+`selectable?: boolean` belongs only to the hook input, `RosterInput`, and defaults to false.
+It is excluded from `RosterProps`.
+`intervalDetailComponent`, `selectionLayout`, and `portalHost` belong to `RosterProps`
+because the chassis mounts the content and layout. The chassis passes
+`selectable: Boolean(intervalDetailComponent)` to `useRoster`.
+`selectionLayout` defaults once in the chassis and wraps the body
+before RosterLayout receives bodyZone. The selection never enters the body content
+key. Missing lane/layer/bounds clear selection; valid selections use current data.
+Pressing the selected interval again dismisses it; pressing another interval
+switches selection. Cell and gap presses dismiss selection while still firing
+`onCellPress` and `onGapPress`. These rules live in the hook and apply on native
+and web; web outside press and Escape still dismiss.
+On web, the layout captures document.activeElement before opening autofocus and
+recaptures the focused lane when targetBounds changes while open. It uses onCloseAutoFocus to return focus after Escape only, leaving outside pointer focus intact. The browser's focus-visible ring styling is left to the host page.
+`portalHost` defaults to a per-roster useId name. The interval-detail fixture switches
+to an inspector column with the same node contract. Schedule does not yet support selection.
+
+The private reconcileSelection helper resolves the stored absolute bounds against the
+current lanes and window each render, matching source identity sets and choosing the
+nearest bounds with a total difference of at most 1 ms for projection roundoff. Target bounds
+include the lane offset and interval inset. Native details clamp horizontally and use the
+top edge when neither below nor above fits. The browser gate isolates selection updates from Pressable state,
+and separately exercises complete pointer presses and outside dismissal.
+
+Native has no intercepting dismissal overlay; body presses reach the hook, and the detail
+card captures its own presses. Web excludes the body wrapper from Radix outside
+dismissal, leaving body presses to the hook while preserving true outside presses and Escape.
+The hook toggles the selected interval closed, switches to another interval, and dismisses
+on cell or gap presses while preserving their callbacks. The body restores horizontal
+and vertical offsets from shared values on remount when selectionLayout changes.
+A mount effect calls the horizontal ScrollView ref's scrollTo without animation;
+native also retains contentOffset. LegendList restores initialScrollOffset through
+its own web mount effect and native initial offset.

package/src/components/roster/body-layout.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode, useEffect, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import type { BodyInput } from './roster.types';
 
@@ -14,10 +14,16 @@ export function RosterBodyLayout({
   /** Virtualized lane collection within the measured viewport. */
   listZone: ReactNode;
 }) {
+  const [contentOffset] = useState(() => ({ x: scroll.x.get(), y: 0 }));
+  const bodyRef = scroll.bodyRef;
+  useEffect(() => {
+    bodyRef.current?.scrollTo({ x: contentOffset.x, animated: false });
+  }, [bodyRef, contentOffset]);
   return (
     <ScrollView
       testID="roster-horizontal-scroll"
       ref={scroll.bodyRef}
+      contentOffset={contentOffset}
       horizontal
       onScroll={scroll.onBodyScroll}
       scrollEventThrottle={16}

package/src/components/roster/index.tsx

@@ -1,3 +1,5 @@
+import { type ReactNode, useId } from 'react';
+import { hasSource } from '../../core';
 import { RosterGap } from '../layers/parts/gap';
 import { RosterInterval } from '../layers/parts/interval';
 import { RosterLaneLabel } from './lanes/parts/lane-label';
@@ -10,6 +12,8 @@ import { RosterHeader } from './parts/header';
 import { RosterHeaderCell } from './parts/header-cell';
 import { RosterLaneLabelColumn } from './parts/lane-label-column';
 import type { RosterProps } from './roster.types';
+import { RosterSelectionPopover } from './selection/selection-layout';
+import type { SelectionLayoutProps } from './selection/selection-layout.types';
 import { useRoster } from './use-roster';
 
 const defaultEmptyZone = <RosterEmpty />;
@@ -17,6 +21,8 @@ const defaultCornerZone = <RosterCorner />;
 
 export function Roster(props: RosterProps) {
   const {
+    selection,
+    dismissSelection,
     status,
     orderedLanes,
     laneState,
@@ -29,8 +35,10 @@ export function Roster(props: RosterProps) {
     contentWidth,
     viewport,
     onLayout,
-  } = useRoster(props);
+  } = useRoster({ ...props, selectable: Boolean(props.intervalDetailComponent) });
   const {
+    intervalDetailComponent: IntervalDetailComponent,
+    selectionLayout: SelectionLayout = RosterSelectionPopover,
     emptyZone = defaultEmptyZone,
     cornerZone = defaultCornerZone,
     headerComponent: HeaderComponent = RosterHeader,
@@ -44,8 +52,30 @@ export function Roster(props: RosterProps) {
     incompleteLabel = 'Availability may be incomplete',
     neverSetLabel = 'No availability set',
   } = props;
+  const hostId = useId();
   if (status === 'empty') return emptyZone;
   if (window.start === window.end) return null;
+  let targetBounds: SelectionLayoutProps['targetBounds'] = null;
+  if (selection) {
+    targetBounds = {
+      x: selection.rect.x,
+      y:
+        orderedLanes.findIndex((lane) => lane.id === selection.lane.id) * projection.rowHeight +
+        selection.rect.y,
+      width: selection.rect.width,
+      height: selection.rect.height,
+    };
+  }
+  let contentZone: ReactNode = null;
+  if (selection && IntervalDetailComponent) {
+    contentZone = (
+      <IntervalDetailComponent
+        {...selection}
+        viewTimezone={projection.viewTimezone}
+        highlighted={hasSource(selection.rect.sources, props.highlightSource)}
+      />
+    );
+  }
   return (
     <RosterLayout
       style={props.style}
@@ -85,22 +115,37 @@ export function Roster(props: RosterProps) {
         />
       }
       bodyZone={
-        <BodyComponent
-          lanes={orderedLanes}
-          window={window}
-          geometryFor={geometryFor}
-          projection={projection}
-          scroll={scroll}
-          press={press}
-          ticks={ticks}
-          contentWidth={contentWidth}
-          viewport={viewport}
-          intervalComponent={intervalComponent}
-          gapComponent={gapComponent}
-          gridComponent={gridComponent}
-          highlightSource={props.highlightSource}
-          onIntervalHover={props.onIntervalHover}
-          incompleteLabel={incompleteLabel}
+        <SelectionLayout
+          portalHost={props.portalHost ?? `roster-${hostId}`}
+          open={selection !== null}
+          onDismiss={dismissSelection}
+          scroll={{
+            x: scroll.x,
+            y: scroll.y,
+            headerStyle: scroll.headerStyle,
+            labelStyle: scroll.labelStyle,
+          }}
+          targetBounds={targetBounds}
+          contentZone={contentZone}
+          anchorZone={
+            <BodyComponent
+              lanes={orderedLanes}
+              window={window}
+              geometryFor={geometryFor}
+              projection={projection}
+              scroll={scroll}
+              press={press}
+              ticks={ticks}
+              contentWidth={contentWidth}
+              viewport={viewport}
+              intervalComponent={intervalComponent}
+              gapComponent={gapComponent}
+              gridComponent={gridComponent}
+              highlightSource={props.highlightSource}
+              onIntervalHover={props.onIntervalHover}
+              incompleteLabel={incompleteLabel}
+            />
+          }
         />
       }
     />

package/src/components/roster/lanes/lane.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from 'react';
 import { Pressable } from 'react-native';
 import type { Lane, LaneGeometry } from '../../../core';
+import { hasSource } from '../../../core';
 import { pressPoint } from '../../primitives/press-point';
 import type { BodyInput } from '../roster.types';
 import { intervalHoverProps } from './interval-hover';
@@ -56,10 +57,7 @@ export function LaneRow({
                   rect={rect}
                   layer={layer}
                   lane={lane}
-                  highlighted={rect.sources.some(
-                    (source) =>
-                      source.kind === highlightSource?.kind && source.id === highlightSource.id,
-                  )}
+                  highlighted={hasSource(rect.sources, highlightSource)}
                 />
               </Fragment>
             ))}

package/src/components/roster/parts/lane-list.tsx

@@ -1,5 +1,5 @@
 import { LegendList } from '@legendapp/list';
-import { Profiler, type ProfilerOnRenderCallback } from 'react';
+import { Profiler, type ProfilerOnRenderCallback, useState } from 'react';
 import { LaneRow } from '../lanes/lane';
 import type { BodyInput } from '../roster.types';
 import { bodyContentKey } from '../utils/body-content-key';
@@ -23,9 +23,11 @@ export function RosterLaneList({
   /** Development-only Profiler hook used by the gallery; not a supported customization point. */
   onRowRender?: ProfilerOnRenderCallback;
 }) {
+  const [initialScrollOffset] = useState(() => scroll.y.get());
   return (
     <LegendList
       testID="roster-vertical-scroll"
+      initialScrollOffset={initialScrollOffset}
       data={lanes}
       extraData={bodyContentKey({
         window,

package/src/components/roster/roster.types.ts

@@ -21,6 +21,14 @@ import type {
   WindowSpec,
 } from '../../core';
 import type { GapInput, IntervalInput } from '../layers/layers.types';
+import type { SelectionLayoutProps } from './selection/selection-layout.types';
+
+/** A selected interval: the rect input plus its absolute bounds and the view zone for formatting. */
+export type IntervalDetailInput = IntervalInput & {
+  start: number;
+  end: number;
+  viewTimezone: string;
+};
 
 export type RosterProjection = Extract<Projection, { orientation: 'horizontal' }>;
 export type RosterTick = { time: number; x: number; label: string; kind: 'day' | 'time' };
@@ -35,6 +43,8 @@ export type RosterScroll = {
   labelStyle: StyleProp<ViewStyle>;
 };
 export type RosterInput = {
+  /** Retain interval selection on press, default false. Lives on RosterInput for hook consumers. */
+  selectable?: boolean;
   lanes: Lane[];
   windowSpec: WindowSpec;
   minuteStep?: number;
@@ -52,6 +62,10 @@ export type RosterInput = {
   pxPerMinute?: number;
 };
 export type RosterModel = {
+  /** Current interval with fresh lane, layer, and rect references and its absolute bounds, or null. */
+  selection: Omit<IntervalDetailInput, 'highlighted' | 'viewTimezone'> | null;
+  /** Close the selected interval details. */
+  dismissSelection: () => void;
   window: Window;
   projection: RosterProjection;
   orderedLanes: Lane[];
@@ -129,8 +143,23 @@ export type RosterStyleProps = {
   /** Width of the corner and lane label column, default 180. */
   laneLabelWidth?: number;
 };
-export type RosterProps = RosterInput &
+export type RosterProps = Omit<RosterInput, 'selectable'> &
   RosterStyleProps & {
+    /**
+     * Selected interval content; absent means interval presses retain no selection.
+     * Lives on RosterProps because the chassis mounts content and enables useRoster selection.
+     */
+    intervalDetailComponent?: ComponentType<IntervalDetailInput>;
+    /**
+     * Presentation strategy for the body and selected details; defaults to RosterSelectionPopover.
+     * Lives on RosterProps because only the chassis mounts the layout, not useRoster.
+     */
+    selectionLayout?: ComponentType<SelectionLayoutProps>;
+    /**
+     * Native portal host name; defaults to a unique useId name for this roster.
+     * Lives on RosterProps because only the chassis mounts the layout, not useRoster.
+     */
+    portalHost?: string;
     incompleteLabel?: string;
     neverSetLabel?: string;
     /** Label, differing lane zone, effective flag, and completeness notice. */

package/src/components/roster/selection/selection-layout.tsx

@@ -0,0 +1,90 @@
+import { type ReactNode, useEffect, useId, useState } from 'react';
+import { BackHandler, ScrollView, View } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { Portal, PortalHost } from '../../primitives/portal';
+import type { SelectionLayoutProps } from './selection-layout.types';
+
+const overlay = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 } as const;
+
+/** Native selection presentation with a local portal destination and shared scroll translation. */
+export function RosterSelectionPopover({
+  anchorZone,
+  contentZone,
+  targetBounds,
+  open,
+  onDismiss,
+  portalHost,
+  scroll,
+}: SelectionLayoutProps) {
+  const name = useId();
+  const [viewport, setViewport] = useState({ width: 0, height: 0 });
+  const [content, setContent] = useState({ width: 0, height: 0 });
+  const maxWidth = Math.max(0, viewport.width - 8);
+  const maxHeight = Math.max(0, viewport.height - 8);
+  const size = { maxWidth, maxHeight, flexShrink: 1 };
+  const { x, y } = scroll;
+  const position = useAnimatedStyle(() => {
+    const below = targetBounds ? targetBounds.y + targetBounds.height + 4 - y.get() : 0;
+    const above = targetBounds ? targetBounds.y - content.height - 4 - y.get() : 0;
+    const maxTop = Math.max(0, viewport.height - content.height);
+    return {
+      left: Math.max(0, Math.min((targetBounds?.x ?? 0) - x.get(), viewport.width - content.width)),
+      top: below >= 0 && below <= maxTop ? below : above >= 0 && above <= maxTop ? above : 0,
+    };
+  });
+  useEffect(() => {
+    if (!open) return;
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      onDismiss();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [open, onDismiss]);
+  let detailZone: ReactNode = null;
+  if (open && targetBounds && maxWidth > 0 && maxHeight > 0) {
+    detailZone = (
+      <Portal hostName={portalHost} name={name}>
+        <Animated.View style={[{ position: 'absolute', maxWidth, maxHeight }, position]}>
+          <View
+            accessibilityRole="summary"
+            onStartShouldSetResponder={() => true}
+            style={size}
+            onLayout={({ nativeEvent }) =>
+              setContent({
+                width: nativeEvent.layout.width,
+                height: nativeEvent.layout.height,
+              })
+            }
+          >
+            <ScrollView style={size} nestedScrollEnabled>
+              <ScrollView
+                horizontal
+                style={{ maxWidth, flexGrow: 0, flexShrink: 0 }}
+                nestedScrollEnabled
+              >
+                {contentZone}
+              </ScrollView>
+            </ScrollView>
+          </View>
+        </Animated.View>
+      </Portal>
+    );
+  }
+  return (
+    <View
+      style={{ flex: 1, minHeight: 0 }}
+      onLayout={({ nativeEvent }) =>
+        setViewport({
+          width: nativeEvent.layout.width,
+          height: nativeEvent.layout.height,
+        })
+      }
+    >
+      {anchorZone}
+      <View pointerEvents="box-none" style={overlay}>
+        <PortalHost name={portalHost} />
+      </View>
+      {detailZone}
+    </View>
+  );
+}

package/src/components/roster/selection/selection-layout.types.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { RosterScroll } from '../roster.types';
+
+/** Presentation-only contract shared by native, web, and consumer strategies. */
+export type SelectionLayoutProps = {
+  /** Mounted body node, rendered once beneath or beside the details. */
+  anchorZone: ReactNode;
+  /** Mounted detail node, or null when closed. */
+  contentZone: ReactNode;
+  /** Interval bounds in body-content coordinates, before scroll translation. */
+  targetBounds: { x: number; y: number; width: number; height: number } | null;
+  /** Whether the detail presentation is open. */
+  open: boolean;
+  /** Report outside press, hardware back, Escape, or a presentation close action. */
+  onDismiss: () => void;
+  /** Unique native destination name owned by this selection layout. */
+  portalHost: string;
+  /** Shared offsets follow body scrolling without updating React state. */
+  scroll: Pick<RosterScroll, 'x' | 'y' | 'headerStyle' | 'labelStyle'>;
+};

package/src/components/roster/selection/selection-layout.web.tsx

@@ -0,0 +1,88 @@
+import { Anchor, Content, Portal, Root } from '@radix-ui/react-popover';
+import { useEffect, useRef } from 'react';
+import Animated from 'react-native-reanimated';
+import type { SelectionLayoutProps } from './selection-layout.types';
+
+/** Web selection presentation; Radix owns outside press, Escape, and collisions. */
+export function RosterSelectionPopover({
+  anchorZone,
+  contentZone,
+  targetBounds,
+  open,
+  onDismiss,
+  scroll,
+}: SelectionLayoutProps) {
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const returnFocusRef = useRef<Element | null>(null);
+  const keyboardDismissRef = useRef(false);
+  useEffect(() => {
+    if (open && targetBounds && bodyRef.current?.contains(document.activeElement)) {
+      returnFocusRef.current = document.activeElement;
+    }
+  }, [open, targetBounds]);
+  return (
+    <Root
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onDismiss();
+      }}
+    >
+      <div
+        ref={bodyRef}
+        style={{
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          minHeight: 0,
+        }}
+      >
+        {anchorZone}
+        <Animated.View style={[{ position: 'absolute', top: 0, left: 0 }, scroll.headerStyle]}>
+          <Animated.View style={scroll.labelStyle}>
+            <Anchor asChild>
+              <div
+                data-testid="roster-selection-target"
+                style={{
+                  position: 'absolute',
+                  left: targetBounds?.x ?? 0,
+                  top: targetBounds ? targetBounds.y + targetBounds.height : 0,
+                  width: 0,
+                  height: 0,
+                  pointerEvents: 'none',
+                }}
+              />
+            </Anchor>
+          </Animated.View>
+        </Animated.View>
+      </div>
+      <Portal>
+        <Content
+          onOpenAutoFocus={() => {
+            returnFocusRef.current = document.activeElement;
+            keyboardDismissRef.current = false;
+          }}
+          onEscapeKeyDown={() => {
+            keyboardDismissRef.current = true;
+          }}
+          onCloseAutoFocus={(event) => {
+            event.preventDefault();
+            if (keyboardDismissRef.current && returnFocusRef.current instanceof HTMLElement) {
+              returnFocusRef.current.focus({ preventScroll: true });
+            }
+          }}
+          onInteractOutside={(event) => {
+            if (bodyRef.current?.contains(event.target as Node)) event.preventDefault();
+          }}
+          sideOffset={4}
+          align="start"
+          updatePositionStrategy="always"
+          aria-label="Interval details"
+          style={{ zIndex: 1000 }}
+        >
+          {contentZone}
+        </Content>
+      </Portal>
+    </Root>
+  );
+}