react-native-roster 0.1.0 → 0.2.0

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/schedule/days/parts/column.tsx

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 import { Pressable } from 'react-native';
+import { hasSource } from '../../../../core';
 import { pressPoint } from '../../../primitives/press-point';
 import type { ScheduleColumnInput } from '../../schedule.types';
 
@@ -24,10 +25,7 @@ export function ScheduleColumn({
                 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/core/README.md

@@ -13,6 +13,7 @@ no React Native, no dependencies.
 | `axis.ts` | window specs, spans, and navigation (`windowFor`, `next`, `prev`, `today`) |
 | `layout.ts` | rect geometry for one lane in either projection |
 | `coverage.ts` | covered and removed minutes per lane |
+| `source.ts` | `hasSource(sources, source)` matches kind and id, ignoring labels |
 | `spans.ts` | the provenance sweep: exact sources per merged span |
 | `columns.ts` | day columns, transitions, and skipped dates for the columns projection |
 | `zone.ts` | Intl-only timezone math (offsets, first instants, transitions) |
@@ -23,3 +24,6 @@ no React Native, no dependencies.
 
 Reference: [design](../../docs/design.md), [timezones](../../docs/timezones.md),
 [caches](../../docs/caches.md). Tests: `test/core`.
+
+The public entry binds immutable function aliases directly to preserve implementation
+identity while avoiding repeated CommonJS getter wrappers in consumer bundles.

package/src/core/index.ts

@@ -14,6 +14,7 @@ export { layoutLane } from './layout';
 export type { LaneComparator } from './order';
 export { byCoverage, byLabel } from './order';
 export { snapToStep, timeAtX, timeAtY } from './snap';
+export { hasSource } from './source';
 export type {
   Coverage,
   DayColumn,

package/src/core/source.ts

@@ -0,0 +1,9 @@
+import type { Source } from './types';
+
+/** Match source identity by kind and id, ignoring display metadata. */
+export function hasSource(sources: readonly Source[], source: Source | undefined): boolean {
+  return (
+    source !== undefined &&
+    sources.some((item) => item.kind === source.kind && item.id === source.id)
+  );
+}

package/src/index.ts

@@ -1,6 +1,7 @@
 export type { GapInput, IntervalInput } from './components/layers/layers.types';
 export { RosterGap } from './components/layers/parts/gap';
 export { RosterInterval } from './components/layers/parts/interval';
+export { Portal, PortalHost } from './components/primitives/portal';
 export { Roster } from './components/roster';
 export { RosterBodyLayout } from './components/roster/body-layout';
 export { RosterLaneLabel } from './components/roster/lanes/parts/lane-label';
@@ -17,6 +18,7 @@ export type {
   GridInput,
   HeaderCellInput,
   HeaderInput,
+  IntervalDetailInput,
   LabelColumnInput,
   LaneLabelInput,
   RosterInput,
@@ -27,6 +29,8 @@ export type {
   RosterStyleProps,
   RosterTick,
 } from './components/roster/roster.types';
+export { RosterSelectionPopover } from './components/roster/selection/selection-layout';
+export type { SelectionLayoutProps } from './components/roster/selection/selection-layout.types';
 export { useRoster } from './components/roster/use-roster';
 export { Schedule } from './components/schedule';
 export { ScheduleColumn } from './components/schedule/days/parts/column';