@colixsystems/widget-sdk 0.266.0 → 0.266.1

package/README.md

@@ -86,7 +86,11 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.266.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.266.1` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+
+### What's new in 0.266.1 (contract 1.216.0)
+
+**An open `<Modal>` or `<Overlay>` holds the page still on the web.** Scrolling past the end of a dialog's body, or over a dialog with nothing to scroll, used to scroll the page behind it. The page now stays put until the dialog closes, as it already did in the phone app. Nothing changes for a widget. An anchored `<Menu>`, `<Popover>` or `<Tooltip>` still closes when the page scrolls under it.
 
 ### What's new in 0.266.0 (contract 1.216.0)
 

package/dist/property-schema.js

@@ -82,6 +82,9 @@ const VALID_TYPES = new Set([
   "object", "array",
 ]);
 
+/** The propertySchema field types, for documentation generated from this list. */
+export const PROPERTY_TYPES = Object.freeze([...VALID_TYPES]);
+
 function isPlainObject(v) {
   return v !== null && typeof v === "object" && !Array.isArray(v);
 }

package/dist/web-modal.js

@@ -59,6 +59,32 @@ function useCloseOnOutsideScroll(container, enabled, onCloseRef) {
   }, [container, enabled, onCloseRef]);
 }
 
+// A dialog owns the screen, as on native: the page beneath must not
+// scroll, even once the dialog's own body runs out of scroll.
+let pageScrollLocks = 0;
+let unlockedRootStyle = null;
+
+function usePageScrollLock(enabled) {
+  React.useEffect(() => {
+    if (!enabled) return undefined;
+    const root = document.documentElement;
+    if (pageScrollLocks++ === 0) {
+      unlockedRootStyle = {
+        overflow: root.style.overflow,
+        scrollbarGutter: root.style.scrollbarGutter,
+      };
+      // Keep a visible scrollbar's space, so the page does not shift sideways.
+      if (window.innerWidth > root.clientWidth) root.style.scrollbarGutter = "stable";
+      root.style.overflow = "hidden";
+    }
+    return () => {
+      if (--pageScrollLocks > 0) return;
+      root.style.overflow = unlockedRootStyle.overflow;
+      root.style.scrollbarGutter = unlockedRootStyle.scrollbarGutter;
+    };
+  }, [enabled]);
+}
+
 function tabStops(dialog) {
   return Array.from(dialog.querySelectorAll(FOCUSABLE)).filter(
     (node) => node.getAttribute("aria-hidden") !== "true",
@@ -147,6 +173,8 @@ function ModalLayer({
   }, [visible]);
   const container = useBodyContainer(visible);
   useCloseOnOutsideScroll(container, closesOnOutsideScroll, onCloseRef);
+  // An anchored panel closes on a scroll beneath instead.
+  usePageScrollLock(Boolean(container) && !closesOnOutsideScroll);
 
   React.useEffect(() => {
     const dialog = dialogRef.current;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.266.0",
+  "version": "0.266.1",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",