react-native-roster 0.0.1 → 0.2.0

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

@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject } from 'react';
+import type { ComponentType, ReactNode, RefObject } from 'react';
 import type {
   LayoutChangeEvent,
   NativeScrollEvent,
@@ -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[];
@@ -75,15 +89,16 @@ export type LaneLabelInput = {
   incompleteLabel: string;
   neverSetLabel: string;
 };
+export type HeaderCellInput = { tick: RosterTick };
 export type GridInput = { ticks: RosterTick[]; contentWidth: number };
 export type HeaderInput = Pick<RosterModel, 'ticks' | 'projection' | 'scroll' | 'contentWidth'> & {
   /** Time label filler, positioned by the header. */
-  headerCellZone: (input: { tick: RosterTick }) => ReactNode;
+  headerCellComponent: ComponentType<HeaderCellInput>;
 };
 export type LabelColumnInput = Pick<RosterModel, 'projection' | 'scroll'> & {
   labels: LaneLabelInput[];
   /** Lane label filler, positioned at the fixed row height. */
-  laneLabelZone: (input: LaneLabelInput) => ReactNode;
+  laneLabelComponent: ComponentType<LaneLabelInput>;
 };
 export type BodyInput = Pick<
   RosterModel,
@@ -101,11 +116,11 @@ export type BodyInput = Pick<
   onIntervalHover?: (rect: Rect, lane: Lane) => void;
   incompleteLabel?: string;
   /** Covered rect view; position it using the final rect bounds, as RosterInterval does. */
-  intervalZone: (input: IntervalInput) => ReactNode;
+  intervalComponent: ComponentType<IntervalInput>;
   /** Removed rect filler, placed inside a pressable by LaneRow. */
-  gapZone: (input: GapInput) => ReactNode;
+  gapComponent: ComponentType<GapInput>;
   /** Noninteractive tick lines behind every lane, sized to the content width. */
-  gridZone: (input: GridInput) => ReactNode;
+  gridComponent: ComponentType<GridInput>;
 };
 /**
  * Chrome style props and their NativeWind class twins. Class props resolve only
@@ -128,28 +143,43 @@ 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. */
-    laneLabelZone?: (input: LaneLabelInput) => ReactNode;
+    laneLabelComponent?: ComponentType<LaneLabelInput>;
     /** Time label within one positioned header tick. */
-    headerCellZone?: (input: { tick: RosterTick }) => ReactNode;
+    headerCellComponent?: ComponentType<HeaderCellInput>;
     /** Covered rect view; use rect bounds for absolute position, rect.z for stacking, and pointerEvents="none" for row hit testing. */
-    intervalZone?: (input: IntervalInput) => ReactNode;
+    intervalComponent?: ComponentType<IntervalInput>;
     /** Removed rect content; LaneRow supplies the invisible pressable. */
-    gapZone?: (input: GapInput) => ReactNode;
+    gapComponent?: ComponentType<GapInput>;
     /** Tick lines behind the lanes; RosterGrid draws one hairline per tick. */
-    gridZone?: (input: GridInput) => ReactNode;
+    gridComponent?: ComponentType<GridInput>;
     /** Empty roster content, conventionally the text No lanes. */
-    emptyZone?: () => ReactNode;
+    emptyZone?: ReactNode;
     /** Top-left cell above the lane labels; RosterCorner renders nothing. */
-    cornerZone?: () => ReactNode;
+    cornerZone?: ReactNode;
     /** Frozen time header, supplied with ticks, scale, and shared scrolling. */
-    headerZone?: (input: HeaderInput) => ReactNode;
+    headerComponent?: ComponentType<HeaderInput>;
     /** Frozen labels, supplied with ordered lanes and per-lane flag and completeness. */
-    laneLabelColumnZone?: (input: LabelColumnInput) => ReactNode;
+    laneLabelColumnComponent?: ComponentType<LabelColumnInput>;
     /** Virtualized lane body, supplied with geometry, projection, scrolling, and press resolution. */
-    bodyZone?: (input: BodyInput) => ReactNode;
+    bodyComponent?: ComponentType<BodyInput>;
   };

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>
+  );
+}

package/src/components/roster/use-roster-press.ts

@@ -0,0 +1,74 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useRef, useState } from 'react';
+import type { Lane, Window } from '../../core';
+import { layoutLane, snapToStep, timeAtX } from '../../core';
+import { hitTest } from '../../core/hit-test';
+import type { RosterInput, RosterModel, RosterProjection } from './roster.types';
+
+export type SelectedInterval = NonNullable<RosterModel['selection']>;
+
+// Isolate the stable press ref so it does not prevent compilation of derived roster values.
+export function useRosterPress(
+  input: RosterInput,
+  window: Window,
+  projection: RosterProjection,
+  width: number,
+  selection: RosterModel['selection'],
+  setSelected: Dispatch<SetStateAction<SelectedInterval | null>>,
+) {
+  const currentPress = { input, window, projection, width, selection };
+  const pressInput = useRef(currentPress);
+  pressInput.current = currentPress;
+  const [press] = useState(() => {
+    return function press(lane: Lane, pointX: number, pointY: number): void {
+      const { input, window, projection, width, selection } = pressInput.current;
+      const { minuteStep = 60, onIntervalPress, onGapPress, onCellPress } = input;
+      const { rowHeight, viewTimezone } = projection;
+      if (
+        !Number.isFinite(pointX) ||
+        !Number.isFinite(pointY) ||
+        pointX < 0 ||
+        pointX >= width ||
+        pointY < 0 ||
+        pointY >= rowHeight
+      )
+        return;
+      const hit = hitTest(lane, layoutLane(lane, window, projection), pointX, pointY);
+      if (hit?.kind === 'interval') {
+        if (input.selectable) {
+          const layer = lane.layers.find((layer) => layer.id === hit.rect.layerId);
+          // layoutLane supplied the hit rect's layerId, so this should succeed; guard future refactors.
+          if (layer === undefined) return;
+          // Compare reconciled geometry so resizing and cache eviction preserve toggle identity.
+          setSelected(
+            selection?.lane.id === lane.id &&
+              selection.rect.layerId === hit.rect.layerId &&
+              selection.rect.x === hit.rect.x &&
+              selection.rect.width === hit.rect.width
+              ? null
+              : {
+                  rect: hit.rect,
+                  layer,
+                  lane,
+                  start: timeAtX(projection, window, hit.rect.x),
+                  end: timeAtX(projection, window, hit.rect.x + hit.rect.width),
+                },
+          );
+        }
+        onIntervalPress?.(hit.rect, lane);
+        return;
+      }
+      if (selection) setSelected(null);
+      if (hit?.kind === 'gap') {
+        onGapPress?.(hit.rect, lane);
+        return;
+      }
+      const time = Math.max(
+        window.start,
+        snapToStep(timeAtX(projection, window, pointX), minuteStep, viewTimezone),
+      );
+      if (time < window.end) onCellPress?.(lane, time);
+    };
+  });
+  return press;
+}

package/src/components/roster/use-roster.ts

@@ -1,18 +1,10 @@
 import { useRef, useState } from 'react';
 import type { ScrollView } from 'react-native';
 import { makeMutable, useAnimatedStyle } from 'react-native-reanimated';
-import type { Lane, LaneGeometry } from '../../core';
-import {
-  byLabel,
-  coverageFor,
-  flagFor,
-  layoutLane,
-  snapToStep,
-  timeAtX,
-  windowFor,
-} from '../../core';
-import { hitTest } from '../../core/hit-test';
+import type { Lane, LaneGeometry, Rect, Window } from '../../core';
+import { byLabel, coverageFor, flagFor, layoutLane, timeAtX, windowFor } from '../../core';
 import type { RosterInput, RosterModel, RosterProjection } from './roster.types';
+import { type SelectedInterval, useRosterPress } from './use-roster-press';
 import { ticksFor } from './utils/ticks';
 
 export function useRoster(input: RosterInput): RosterModel {
@@ -25,6 +17,10 @@ export function useRoster(input: RosterInput): RosterModel {
     pxPerMinute = 0.5,
     onNavigate,
   } = input;
+  const [selected, setSelected] = useState<SelectedInterval | null>(null);
+  function dismissSelection() {
+    setSelected(null);
+  }
   const [viewport, setViewport] = useState({ width: 0, height: 0 });
   // The pinned compiler lint cannot resolve useSharedValue's built-in type.
   // These shared values only track offsets, so no animation needs cancellation.
@@ -60,40 +56,19 @@ export function useRoster(input: RosterInput): RosterModel {
   function geometryFor(lane: Lane): LaneGeometry {
     return layoutLane(lane, window, projection);
   }
-  const currentPress = { input, window, projection, width: contentWidth };
-  const pressInput = useRef(currentPress);
-  pressInput.current = currentPress;
-  const [press] = useState(() => {
-    return function press(lane: Lane, pointX: number, pointY: number): void {
-      const { input, window, projection, width } = pressInput.current;
-      const { minuteStep = 60, onIntervalPress, onGapPress, onCellPress } = input;
-      const { rowHeight, viewTimezone } = projection;
-      if (
-        !Number.isFinite(pointX) ||
-        !Number.isFinite(pointY) ||
-        pointX < 0 ||
-        pointX >= width ||
-        pointY < 0 ||
-        pointY >= rowHeight
-      )
-        return;
-      const hit = hitTest(lane, layoutLane(lane, window, projection), pointX, pointY);
-      if (hit?.kind === 'interval') {
-        onIntervalPress?.(hit.rect, lane);
-        return;
-      }
-      if (hit?.kind === 'gap') {
-        onGapPress?.(hit.rect, lane);
-        return;
-      }
-      const time = Math.max(
-        window.start,
-        snapToStep(timeAtX(projection, window, pointX), minuteStep, viewTimezone),
-      );
-      if (time < window.end) onCellPress?.(lane, time);
-    };
-  });
+  const selection = reconcileSelection(
+    selected,
+    lanes,
+    window,
+    projection,
+    input.selectable ?? false,
+  );
+  // Discard invalid selection during reconciliation, before rendering any stale detail.
+  if (selected && !selection) setSelected(null);
+  const press = useRosterPress(input, window, projection, contentWidth, selection, setSelected);
   return {
+    selection,
+    dismissSelection,
     window,
     projection,
     orderedLanes,
@@ -131,3 +106,41 @@ export function useRoster(input: RosterInput): RosterModel {
     },
   };
 }
+
+// Match provenance and nearest bounds while preserving the stored display values.
+function reconcileSelection(
+  selected: SelectedInterval | null,
+  lanes: Lane[],
+  window: Window,
+  projection: RosterProjection,
+  enabled: boolean,
+): RosterModel['selection'] {
+  if (selected && enabled) {
+    const lane = lanes.find((lane) => lane.id === selected.lane.id);
+    const layer = lane?.layers.find((layer) => layer.id === selected.layer.id);
+    if (lane && layer) {
+      const sources = new Set(
+        selected.rect.sources.map((source) => JSON.stringify([source.kind, source.id])),
+      );
+      let rect: Rect | undefined;
+      let nearest = 1;
+      for (const candidate of layoutLane(lane, window, projection).rects) {
+        if (candidate.layerId !== layer.id) continue;
+        const identities = new Set(
+          candidate.sources.map((source) => JSON.stringify([source.kind, source.id])),
+        );
+        if (identities.size !== sources.size || ![...identities].every((id) => sources.has(id)))
+          continue;
+        const difference =
+          Math.abs(timeAtX(projection, window, candidate.x) - selected.start) +
+          Math.abs(timeAtX(projection, window, candidate.x + candidate.width) - selected.end);
+        if (difference <= nearest && (!rect || difference < nearest)) {
+          nearest = difference;
+          rect = candidate;
+        }
+      }
+      if (rect) return { rect, layer, lane, start: selected.start, end: selected.end };
+    }
+  }
+  return null;
+}

package/src/components/roster/utils/body-content-key.ts

@@ -1,13 +1,13 @@
 import type { BodyInput } from '../roster.types';
 
-const zoneIds = new WeakMap<object, number>();
-let nextZoneId = 0;
+const identityIds = new WeakMap<object, number>();
+let nextIdentityId = 0;
 
-function zoneId(zone: object): number {
-  let id = zoneIds.get(zone);
+function identityId(identity: object): number {
+  let id = identityIds.get(identity);
   if (id === undefined) {
-    id = nextZoneId++;
-    zoneIds.set(zone, id);
+    id = nextIdentityId++;
+    identityIds.set(identity, id);
   }
   return id;
 }
@@ -16,8 +16,8 @@ export function bodyContentKey({
   window,
   projection,
   highlightSource,
-  intervalZone,
-  gapZone,
+  intervalComponent,
+  gapComponent,
   onIntervalHover,
   incompleteLabel,
 }: Pick<
@@ -25,8 +25,8 @@ export function bodyContentKey({
   | 'window'
   | 'projection'
   | 'highlightSource'
-  | 'intervalZone'
-  | 'gapZone'
+  | 'intervalComponent'
+  | 'gapComponent'
   | 'onIntervalHover'
   | 'incompleteLabel'
 >): string {
@@ -38,9 +38,9 @@ export function bodyContentKey({
     projection.pxPerMinute,
     highlightSource?.kind,
     highlightSource?.id,
-    zoneId(intervalZone),
-    zoneId(gapZone),
-    onIntervalHover && zoneId(onIntervalHover),
+    identityId(intervalComponent),
+    identityId(gapComponent),
+    onIntervalHover && identityId(onIntervalHover),
     incompleteLabel,
   ]);
 }

package/src/components/schedule/README.md

@@ -3,16 +3,21 @@
 This feature is about a schedule; its children are days.
 
 - Root entry exports: `Schedule`, `useSchedule`, the `ScheduleXxx` parts, and
-  every `ScheduleXxxInput` zone type from `schedule.types.ts`
+  every `ScheduleXxxInput` slot input type from `schedule.types.ts`
 
 - `index.tsx`: the chassis; measures the viewport, calls `useSchedule`, composes zones
 - `use-schedule.ts`, `use-schedule-viewport.ts`: the hook and the width context
 - `layout.tsx`: arranges header, gutter, and days regions only
-- `schedule.types.ts`: props, model, and every zone input type
+- `schedule.types.ts`: props, model, and every slot input type
 - `parts/`: collection-level parts (gutter, incomplete)
 - `days/`: `ScheduleDay`, the day and day-header layouts, and day-local parts
 - `utils/days.ts`: header dates, now position, and transition bounds
 
-Interval and gap fillers live in `../layers`; press geometry and `regionStyle`
+Interval and gap components live in `../layers`; press geometry and `regionStyle`
 in `../primitives`. Zone contracts are documented in the README's Schedule
 section and in `llms.txt`. Tests: `test/components/schedule`.
+
+The chassis binds default component types once; ScheduleDay mounts components
+with day data and passes nodes into ScheduleDayLayout. There is no black-box day
+list to split: days, transitions, and rects already map in their owning parts.
+Schedule has ten input-bearing component slots and no zero-argument singleton slots.