react-native-roster 0.0.1 → 0.2.0

package/src/components/roster/README.md

@@ -2,17 +2,74 @@
 
 This feature is about a roster; its children are lanes.
 
-- Root entry exports: `Roster`, `useRoster`, the `RosterXxx` parts, and every
-  `XxxInput` zone type from `roster.types.ts`
+- Root entry exports: `Roster`, `useRoster`, `RosterBodyLayout`, `RosterLaneList`, the other `RosterXxx` parts, and every
+  `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 zone input type
+- `roster.types.ts`: props, model, and every slot input type
+- `body-layout.tsx`: arranges grid and list nodes with horizontal scroll wiring
+- `parts/lane-list.tsx`: `RosterLaneList` owns LegendList and its lane render callback
 - `parts/`: collection-level parts (body, header, header cell, grid, corner, label column, empty)
 - `lanes/`: `LaneRow`, the interval-hover platform pair, and lane-local parts
 - `utils/`: ticks and the body content key
 
-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 Roster zones
 section and in `llms.txt`. Tests: `test/components/roster`.
+
+`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.
+
+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

@@ -0,0 +1,38 @@
+import { type ReactNode, useEffect, useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import type { BodyInput } from './roster.types';
+
+export function RosterBodyLayout({
+  scroll,
+  contentWidth,
+  viewport,
+  gridZone,
+  listZone,
+}: Pick<BodyInput, 'scroll' | 'contentWidth' | 'viewport'> & {
+  /** Noninteractive grid behind the lane list. */
+  gridZone: ReactNode;
+  /** 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}
+      style={{ flex: 1 }}
+    >
+      <View style={{ width: contentWidth, height: viewport.height }}>
+        {gridZone}
+        {listZone}
+      </View>
+    </ScrollView>
+  );
+}

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,10 +12,17 @@ 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 />;
+const defaultCornerZone = <RosterCorner />;
+
 export function Roster(props: RosterProps) {
   const {
+    selection,
+    dismissSelection,
     status,
     orderedLanes,
     laneState,
@@ -26,23 +35,47 @@ export function Roster(props: RosterProps) {
     contentWidth,
     viewport,
     onLayout,
-  } = useRoster(props);
+  } = useRoster({ ...props, selectable: Boolean(props.intervalDetailComponent) });
   const {
-    emptyZone = RosterEmpty,
-    cornerZone = RosterCorner,
-    headerZone = RosterHeader,
-    laneLabelColumnZone = RosterLaneLabelColumn,
-    bodyZone = RosterBody,
-    headerCellZone = RosterHeaderCell,
-    laneLabelZone = RosterLaneLabel,
-    intervalZone = RosterInterval,
-    gapZone = RosterGap,
-    gridZone = RosterGrid,
+    intervalDetailComponent: IntervalDetailComponent,
+    selectionLayout: SelectionLayout = RosterSelectionPopover,
+    emptyZone = defaultEmptyZone,
+    cornerZone = defaultCornerZone,
+    headerComponent: HeaderComponent = RosterHeader,
+    laneLabelColumnComponent: LaneLabelColumnComponent = RosterLaneLabelColumn,
+    bodyComponent: BodyComponent = RosterBody,
+    headerCellComponent = RosterHeaderCell,
+    laneLabelComponent = RosterLaneLabel,
+    intervalComponent = RosterInterval,
+    gapComponent = RosterGap,
+    gridComponent = RosterGrid,
     incompleteLabel = 'Availability may be incomplete',
     neverSetLabel = 'No availability set',
   } = props;
-  if (status === 'empty') return emptyZone();
+  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}
@@ -51,40 +84,70 @@ export function Roster(props: RosterProps) {
       bodyStyle={props.bodyStyle}
       laneLabelWidth={props.laneLabelWidth}
       onLayout={onLayout}
-      cornerZone={cornerZone()}
-      headerZone={headerZone({ ticks, projection, scroll, contentWidth, headerCellZone })}
-      laneLabelColumnZone={laneLabelColumnZone({
-        labels: orderedLanes.map((lane) => {
-          const state = laneState.get(lane.id) ?? { flag: 'none', complete: true };
-          return {
-            lane,
-            ...state,
-            viewTimezone: projection.viewTimezone,
-            incompleteLabel,
-            neverSetLabel,
-          };
-        }),
-        projection,
-        scroll,
-        laneLabelZone,
-      })}
-      bodyZone={bodyZone({
-        lanes: orderedLanes,
-        window,
-        geometryFor,
-        projection,
-        scroll,
-        press,
-        ticks,
-        contentWidth,
-        viewport,
-        intervalZone,
-        gapZone,
-        gridZone,
-        highlightSource: props.highlightSource,
-        onIntervalHover: props.onIntervalHover,
-        incompleteLabel,
-      })}
+      cornerZone={cornerZone}
+      headerZone={
+        <HeaderComponent
+          ticks={ticks}
+          projection={projection}
+          scroll={scroll}
+          contentWidth={contentWidth}
+          headerCellComponent={headerCellComponent}
+        />
+      }
+      laneLabelColumnZone={
+        <LaneLabelColumnComponent
+          labels={orderedLanes.map((lane) => {
+            const state = laneState.get(lane.id) ?? {
+              flag: 'none',
+              complete: true,
+            };
+            return {
+              lane,
+              ...state,
+              viewTimezone: projection.viewTimezone,
+              incompleteLabel,
+              neverSetLabel,
+            };
+          })}
+          projection={projection}
+          scroll={scroll}
+          laneLabelComponent={laneLabelComponent}
+        />
+      }
+      bodyZone={
+        <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';
@@ -8,7 +9,12 @@ import { RosterIncomplete } from './parts/incomplete';
 
 export type LaneRowProps = Pick<
   BodyInput,
-  'press' | 'intervalZone' | 'gapZone' | 'highlightSource' | 'onIntervalHover' | 'incompleteLabel'
+  | 'press'
+  | 'intervalComponent'
+  | 'gapComponent'
+  | 'highlightSource'
+  | 'onIntervalHover'
+  | 'incompleteLabel'
 > & {
   lane: Lane;
   geometry: LaneGeometry;
@@ -22,8 +28,8 @@ export function LaneRow({
   width,
   rowHeight,
   press,
-  intervalZone,
-  gapZone,
+  intervalComponent: IntervalComponent,
+  gapComponent: GapComponent,
   highlightSource,
   onIntervalHover,
   incompleteLabel = 'Availability may be incomplete',
@@ -47,15 +53,12 @@ export function LaneRow({
             .filter((rect) => rect.layerId === layer.id)
             .map((rect) => (
               <Fragment key={`interval-${rect.x}:${rect.width}`}>
-                {intervalZone({
-                  rect,
-                  layer,
-                  lane,
-                  highlighted: rect.sources.some(
-                    (source) =>
-                      source.kind === highlightSource?.kind && source.id === highlightSource.id,
-                  ),
-                })}
+                <IntervalComponent
+                  rect={rect}
+                  layer={layer}
+                  lane={lane}
+                  highlighted={hasSource(rect.sources, highlightSource)}
+                />
               </Fragment>
             ))}
           {geometry.gapRects
@@ -78,7 +81,7 @@ export function LaneRow({
                   zIndex: rect.z,
                 }}
               >
-                {gapZone({ rect, layer, lane })}
+                <GapComponent rect={rect} layer={layer} lane={lane} />
               </Pressable>
             ))}
         </Fragment>

package/src/components/roster/parts/body.tsx

@@ -1,91 +1,24 @@
-import { LegendList } from '@legendapp/list';
-import { Profiler, type ProfilerOnRenderCallback } from 'react';
-import { ScrollView, View } from 'react-native';
-import { LaneRow } from '../lanes/lane';
+import type { ProfilerOnRenderCallback } from 'react';
+import { RosterBodyLayout } from '../body-layout';
 import type { BodyInput } from '../roster.types';
-import { bodyContentKey } from '../utils/body-content-key';
+import { RosterLaneList } from './lane-list';
 
-export function RosterBody({
-  lanes,
-  geometryFor,
-  projection,
-  scroll,
-  press,
-  ticks,
-  contentWidth,
-  viewport,
-  window,
-  intervalZone,
-  gapZone,
-  gridZone,
-  highlightSource,
-  onIntervalHover,
-  incompleteLabel,
-  onRowRender,
-}: BodyInput & {
-  /** Optional per-lane commit observer; used by the development gallery's Profiler gate. */
-  onRowRender?: ProfilerOnRenderCallback;
-}) {
+export function RosterBody(
+  props: BodyInput & {
+    /** Development-only Profiler hook used by the gallery; not a supported customization point. */
+    onRowRender?: ProfilerOnRenderCallback;
+  },
+) {
+  const { viewport, scroll, contentWidth, ticks, gridComponent: GridComponent } = props;
   // LegendList requires a measured viewport and does not support static rendering.
   if (viewport.width <= 0 || viewport.height <= 0) return null;
   return (
-    <ScrollView
-      testID="roster-horizontal-scroll"
-      ref={scroll.bodyRef}
-      horizontal
-      onScroll={scroll.onBodyScroll}
-      scrollEventThrottle={16}
-      style={{ flex: 1 }}
-    >
-      <View style={{ width: contentWidth, height: viewport.height }}>
-        {gridZone({ ticks, contentWidth })}
-        <LegendList
-          testID="roster-vertical-scroll"
-          data={lanes}
-          extraData={bodyContentKey({
-            window,
-            projection,
-            highlightSource,
-            intervalZone,
-            gapZone,
-            onIntervalHover,
-            incompleteLabel,
-          })}
-          keyExtractor={(lane) => lane.id}
-          estimatedListSize={{ width: contentWidth, height: viewport.height }}
-          estimatedItemSize={projection.rowHeight}
-          getFixedItemSize={() => projection.rowHeight}
-          drawDistance={0}
-          recycleItems={false}
-          maintainVisibleContentPosition={false}
-          onScroll={scroll.onVerticalScroll}
-          scrollEventThrottle={16}
-          style={{ flex: 1 }}
-          renderItem={({ item }) => {
-            const row = (
-              <LaneRow
-                lane={item}
-                geometry={geometryFor(item)}
-                width={contentWidth}
-                rowHeight={projection.rowHeight}
-                press={press}
-                intervalZone={intervalZone}
-                gapZone={gapZone}
-                highlightSource={highlightSource}
-                onIntervalHover={onIntervalHover}
-                incompleteLabel={incompleteLabel}
-              />
-            );
-            if (onRowRender)
-              return (
-                <Profiler id={item.id} onRender={onRowRender}>
-                  {row}
-                </Profiler>
-              );
-            return row;
-          }}
-        />
-      </View>
-    </ScrollView>
+    <RosterBodyLayout
+      scroll={scroll}
+      contentWidth={contentWidth}
+      viewport={viewport}
+      gridZone={<GridComponent ticks={ticks} contentWidth={contentWidth} />}
+      listZone={<RosterLaneList {...props} />}
+    />
   );
 }

package/src/components/roster/parts/header-cell.tsx

@@ -1,7 +1,7 @@
 import { Text } from 'react-native';
-import type { RosterTick } from '../roster.types';
+import type { HeaderCellInput } from '../roster.types';
 
-export function RosterHeaderCell({ tick }: { tick: RosterTick }) {
+export function RosterHeaderCell({ tick }: HeaderCellInput) {
   return (
     <Text numberOfLines={1} style={{ color: '#475569', fontSize: 11, padding: 4 }}>
       {tick.label}

package/src/components/roster/parts/header.tsx

@@ -2,7 +2,12 @@ import { View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import type { HeaderInput } from '../roster.types';
 
-export function RosterHeader({ ticks, contentWidth, scroll, headerCellZone }: HeaderInput) {
+export function RosterHeader({
+  ticks,
+  contentWidth,
+  scroll,
+  headerCellComponent: HeaderCellComponent,
+}: HeaderInput) {
   return (
     <Animated.View
       testID="roster-header"
@@ -10,7 +15,7 @@ export function RosterHeader({ ticks, contentWidth, scroll, headerCellZone }: He
     >
       {ticks.map((tick) => (
         <View key={tick.time} style={{ position: 'absolute', left: tick.x, top: 0 }}>
-          {headerCellZone({ tick })}
+          <HeaderCellComponent tick={tick} />
         </View>
       ))}
     </Animated.View>

package/src/components/roster/parts/lane-label-column.tsx

@@ -6,7 +6,7 @@ export function RosterLaneLabelColumn({
   labels,
   projection,
   scroll,
-  laneLabelZone,
+  laneLabelComponent: LaneLabelComponent,
 }: LabelColumnInput) {
   return (
     <Animated.View
@@ -23,7 +23,7 @@ export function RosterLaneLabelColumn({
             width: '100%',
           }}
         >
-          {laneLabelZone(label)}
+          <LaneLabelComponent {...label} />
         </View>
       ))}
     </Animated.View>

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

@@ -0,0 +1,76 @@
+import { LegendList } from '@legendapp/list';
+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';
+
+export function RosterLaneList({
+  lanes,
+  geometryFor,
+  projection,
+  scroll,
+  press,
+  contentWidth,
+  viewport,
+  window,
+  intervalComponent,
+  gapComponent,
+  highlightSource,
+  onIntervalHover,
+  incompleteLabel,
+  onRowRender,
+}: Omit<BodyInput, 'ticks' | 'gridComponent'> & {
+  /** 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,
+        projection,
+        highlightSource,
+        intervalComponent,
+        gapComponent,
+        onIntervalHover,
+        incompleteLabel,
+      })}
+      keyExtractor={(lane) => lane.id}
+      estimatedListSize={{ width: contentWidth, height: viewport.height }}
+      estimatedItemSize={projection.rowHeight}
+      getFixedItemSize={() => projection.rowHeight}
+      drawDistance={0}
+      recycleItems={false}
+      maintainVisibleContentPosition={false}
+      onScroll={scroll.onVerticalScroll}
+      scrollEventThrottle={16}
+      style={{ flex: 1 }}
+      renderItem={({ item }) => {
+        const row = (
+          <LaneRow
+            lane={item}
+            geometry={geometryFor(item)}
+            width={contentWidth}
+            rowHeight={projection.rowHeight}
+            press={press}
+            intervalComponent={intervalComponent}
+            gapComponent={gapComponent}
+            highlightSource={highlightSource}
+            onIntervalHover={onIntervalHover}
+            incompleteLabel={incompleteLabel}
+          />
+        );
+        if (onRowRender)
+          return (
+            <Profiler id={item.id} onRender={onRowRender}>
+              {row}
+            </Profiler>
+          );
+        return row;
+      }}
+    />
+  );
+}