react-native-roster 0.4.3 → 0.4.4

package/README.md

@@ -190,6 +190,8 @@ The caller owns clock updates. Only instants inside the end-exclusive window are
 Props ending in `Component` accept component types; props ending in `Zone`
 accept React nodes. Define slot components at module scope to preserve state.
 Use exported defaults inside replacements to retain geometry and interaction.
+On web, translated header and lane-label regions use non-scrolling clips, so focusable
+custom content cannot move them out of alignment with the roster body.
 The [slot tables and examples](./docs/customization.md#roster-zones) cover every region.
 
 ### Selection

package/dist/src/components/roster/focus-safe-clip.d.ts

@@ -0,0 +1,4 @@
+export declare const focusSafeClip: {
+    overflow: "hidden";
+};
+//# sourceMappingURL=focus-safe-clip.d.ts.map

package/dist/src/components/roster/focus-safe-clip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-safe-clip.d.ts","sourceRoot":"","sources":["../../../../src/components/roster/focus-safe-clip.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;CAA6C,CAAC"}

package/dist/src/components/roster/focus-safe-clip.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusSafeClip = void 0;
+exports.focusSafeClip = { overflow: 'hidden' };
+//# sourceMappingURL=focus-safe-clip.js.map

package/dist/src/components/roster/focus-safe-clip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-safe-clip.js","sourceRoot":"","sources":["../../../../src/components/roster/focus-safe-clip.ts"],"names":[],"mappings":";;;AAEa,QAAA,aAAa,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAsB,CAAC"}

package/dist/src/components/roster/focus-safe-clip.web.d.ts

@@ -0,0 +1,3 @@
+import type { ViewStyle } from 'react-native';
+export declare const focusSafeClip: ViewStyle;
+//# sourceMappingURL=focus-safe-clip.web.d.ts.map

package/dist/src/components/roster/focus-safe-clip.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-safe-clip.web.d.ts","sourceRoot":"","sources":["../../../../src/components/roster/focus-safe-clip.web.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,aAAa,EAAsC,SAAS,CAAC"}

package/dist/src/components/roster/focus-safe-clip.web.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusSafeClip = void 0;
+exports.focusSafeClip = { overflow: 'clip' };
+//# sourceMappingURL=focus-safe-clip.web.js.map

package/dist/src/components/roster/focus-safe-clip.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-safe-clip.web.js","sourceRoot":"","sources":["../../../../src/components/roster/focus-safe-clip.web.ts"],"names":[],"mappings":";;;AAEa,QAAA,aAAa,GAAG,EAAE,QAAQ,EAAE,MAAM,EAA0B,CAAC"}

package/dist/src/components/roster/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/components/roster/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,KAAK,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG;IACpF,qDAAqD;IACrD,UAAU,EAAE,SAAS,CAAC;IACtB,mEAAmE;IACnE,UAAU,EAAE,SAAS,CAAC;IACtB,+FAA+F;IAC/F,mBAAmB,EAAE,SAAS,CAAC;IAC/B,kFAAkF;IAClF,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,oBAAoB,EACpB,SAAS,EACT,cAAoB,GACrB,EAAE,iBAAiB,2CAuBnB"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/components/roster/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAItD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,KAAK,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG;IACpF,qDAAqD;IACrD,UAAU,EAAE,SAAS,CAAC;IACtB,mEAAmE;IACnE,UAAU,EAAE,SAAS,CAAC;IACtB,+FAA+F;IAC/F,mBAAmB,EAAE,SAAS,CAAC;IAC/B,kFAAkF;IAClF,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,oBAAoB,EACpB,SAAS,EACT,cAAoB,GACrB,EAAE,iBAAiB,2CAuBnB"}

package/dist/src/components/roster/layout.js

@@ -4,15 +4,16 @@ exports.RosterLayout = RosterLayout;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
 const region_style_1 = require("../primitives/region-style");
+const focus_safe_clip_1 = require("./focus-safe-clip");
 function RosterLayout({ cornerZone, headerZone, laneLabelColumnZone, bodyZone, onLayout, style, headerStyle, laneLabelColumnStyle, bodyStyle, laneLabelWidth = 180, }) {
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: (0, region_style_1.regionStyle)(structure.root, paint.root, style), children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: (0, region_style_1.regionStyle)(structure.header, paint.header, headerStyle), children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: laneLabelWidth }, children: cornerZone }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: structure.headerStrip, children: headerZone })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: structure.content, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: (0, region_style_1.regionStyle)({ ...structure.labels, width: laneLabelWidth }, paint.labels, laneLabelColumnStyle), children: laneLabelColumnZone }), (0, jsx_runtime_1.jsx)(react_native_1.View, { onLayout: onLayout, style: (0, region_style_1.regionStyle)(structure.body, {}, bodyStyle), children: bodyZone })] })] }));
 }
 const structure = {
     root: { flex: 1, minHeight: 0, overflow: 'hidden' },
     header: { flexDirection: 'row', height: 40, overflow: 'hidden' },
-    headerStrip: { flex: 1, minWidth: 0, overflow: 'hidden' },
+    headerStrip: { flex: 1, minWidth: 0, ...focus_safe_clip_1.focusSafeClip },
     content: { flex: 1, minHeight: 0, flexDirection: 'row' },
-    labels: { overflow: 'hidden' },
+    labels: focus_safe_clip_1.focusSafeClip,
     body: { flex: 1, minWidth: 0, overflow: 'hidden' },
 };
 // Paint is what a class replaces; see regionStyle.

package/dist/src/components/roster/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/components/roster/layout.tsx"],"names":[],"mappings":";;;;AAEA,+CAAoC;AACpC,6DAAyD;AAezD,sBAA6B,EAC3B,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,oBAAoB,EACpB,SAAS,EACT,cAAc,GAAG,GAAG,GACF;IAClB,OAAO,CACL,wBAAC,mBAAI,IAAC,KAAK,EAAE,IAAA,0BAAW,EAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,aACzD,wBAAC,mBAAI,IAAC,KAAK,EAAE,IAAA,0BAAW,EAAC,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,aACnE,uBAAC,mBAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,YAAG,UAAU,GAAQ,EAC3D,uBAAC,mBAAI,IAAC,KAAK,EAAE,SAAS,CAAC,WAAW,YAAG,UAAU,GAAQ,IAClD,EACP,wBAAC,mBAAI,IAAC,KAAK,EAAE,SAAS,CAAC,OAAO,aAC5B,uBAAC,mBAAI,IACH,KAAK,EAAE,IAAA,0BAAW,EAChB,EAAE,GAAG,SAAS,CAAC,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,EAC9C,KAAK,CAAC,MAAM,EACZ,oBAAoB,CACrB,YAEA,mBAAmB,GACf,EACP,uBAAC,mBAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAA,0BAAW,EAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,CAAC,YACxE,QAAQ,GACJ,IACF,IACF,CACR,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE;IACnD,MAAM,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;IAChE,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE;IACzD,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE;IACxD,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;IAC9B,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE;CAC1C,CAAC;AACX,mDAAmD;AACnD,MAAM,KAAK,GAAG;IACZ,IAAI,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,EAAE,iBAAiB,EAAE,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE;IAC9D,MAAM,EAAE,EAAE,gBAAgB,EAAE,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE;CACpD,CAAC"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/components/roster/layout.tsx"],"names":[],"mappings":";;;;AAEA,+CAAoC;AACpC,6DAAyD;AACzD,uDAAkD;AAelD,sBAA6B,EAC3B,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,oBAAoB,EACpB,SAAS,EACT,cAAc,GAAG,GAAG,GACF;IAClB,OAAO,CACL,wBAAC,mBAAI,IAAC,KAAK,EAAE,IAAA,0BAAW,EAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,aACzD,wBAAC,mBAAI,IAAC,KAAK,EAAE,IAAA,0BAAW,EAAC,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,aACnE,uBAAC,mBAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,YAAG,UAAU,GAAQ,EAC3D,uBAAC,mBAAI,IAAC,KAAK,EAAE,SAAS,CAAC,WAAW,YAAG,UAAU,GAAQ,IAClD,EACP,wBAAC,mBAAI,IAAC,KAAK,EAAE,SAAS,CAAC,OAAO,aAC5B,uBAAC,mBAAI,IACH,KAAK,EAAE,IAAA,0BAAW,EAChB,EAAE,GAAG,SAAS,CAAC,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,EAC9C,KAAK,CAAC,MAAM,EACZ,oBAAoB,CACrB,YAEA,mBAAmB,GACf,EACP,uBAAC,mBAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAA,0BAAW,EAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,CAAC,YACxE,QAAQ,GACJ,IACF,IACF,CACR,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE;IACnD,MAAM,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;IAChE,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,+BAAa,EAAE;IACvD,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE;IACxD,MAAM,EAAE,+BAAa;IACrB,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE;CAC1C,CAAC;AACX,mDAAmD;AACnD,MAAM,KAAK,GAAG;IACZ,IAAI,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,EAAE,iBAAiB,EAAE,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE;IAC9D,MAAM,EAAE,EAAE,gBAAgB,EAAE,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE;CACpD,CAAC"}

package/llms.txt

@@ -200,6 +200,8 @@ Native Web renders object styles inline where they would beat any class. Labels
 be incomplete". Supply a bounded height; Roster waits for viewport measurement
 before mounting LegendList. Reanimated keeps horizontal and vertical offsets
 outside React state.
+On web, translated header and lane-label regions use non-scrolling clips, so browser
+focus scrolling cannot move custom content independently of the roster body.
 
 useRoster returns window, projection, orderedLanes, coverage, laneState,
 geometryFor(lane), scroll, press(lane,x,y), ticks, contentWidth, viewport,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-roster",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Resource timeline and schedule components for React Native and web, with layered intervals, coverage, provenance, and explicit daylight-saving handling.",
   "keywords": [
     "react-native",
@@ -41,6 +41,7 @@
   "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/focus-safe-clip.js": "./dist/src/components/roster/focus-safe-clip.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"
   },

package/src/components/roster/README.md

@@ -30,6 +30,9 @@ 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.
+The layout uses non-scrolling web clips around translated header and lane-label
+content, preventing focus from offsetting either region independently. Native keeps
+overflow clipping on the same regions.
 
 `now` is a controlled epoch millisecond value, default null. `useRoster` derives
 `nowLine` (`{ x, now }`) during render via `xAtTime` using the fitted horizontal

package/src/components/roster/focus-safe-clip.ts

@@ -0,0 +1,3 @@
+import type { ViewStyle } from 'react-native';
+
+export const focusSafeClip = { overflow: 'hidden' } satisfies ViewStyle;

package/src/components/roster/focus-safe-clip.web.ts

@@ -0,0 +1,3 @@
+import type { ViewStyle } from 'react-native';
+
+export const focusSafeClip = { overflow: 'clip' } as unknown as ViewStyle;

package/src/components/roster/layout.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import { View } from 'react-native';
 import { regionStyle } from '../primitives/region-style';
+import { focusSafeClip } from './focus-safe-clip';
 import type { RosterStyleProps } from './roster.types';
 
 type RosterLayoutProps = Omit<RosterStyleProps, `${string}ClassName` | 'className'> & {
@@ -55,9 +56,9 @@ export function RosterLayout({
 const structure = {
   root: { flex: 1, minHeight: 0, overflow: 'hidden' },
   header: { flexDirection: 'row', height: 40, overflow: 'hidden' },
-  headerStrip: { flex: 1, minWidth: 0, overflow: 'hidden' },
+  headerStrip: { flex: 1, minWidth: 0, ...focusSafeClip },
   content: { flex: 1, minHeight: 0, flexDirection: 'row' },
-  labels: { overflow: 'hidden' },
+  labels: focusSafeClip,
   body: { flex: 1, minWidth: 0, overflow: 'hidden' },
 } as const;
 // Paint is what a class replaces; see regionStyle.