@humandialog/forms.svelte 1.7.15 → 1.7.17

package/components/Floating_container.svelte

@@ -3,6 +3,7 @@ import { isDeviceSmallerThan } from "../utils";
 import { pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPopup } from "../stores";
 import { FaTimes } from "svelte-icons/fa";
 import Icon from "./icon.svelte";
+import { usePreventScroll } from "./react-aria/preventScroll";
 let x;
 let y;
 let visible = false;
@@ -13,6 +14,7 @@ let rootElement;
 let internalElement;
 let closeButtonPos = "";
 let maxHeight = 0;
+let preventScrollRestorer = null;
 export async function show(around, _toolbar, _props = {}) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -37,6 +39,8 @@ export async function show(around, _toolbar, _props = {}) {
   props.onSizeChanged = () => onSizeChanged();
   hide_window_indicator = 0;
   window.addEventListener("click", on_before_window_click, true);
+  if (isDeviceSmallerThan("sm"))
+    preventScrollRestorer = usePreventScroll();
   if (isDeviceSmallerThan("sm")) {
     $fabHiddenDueToPopup = true;
   }
@@ -57,6 +61,10 @@ export function hide() {
   cssPosition = calculatePosition(x, y, around_rect, false, false);
   window.removeEventListener("click", on_before_window_click, true);
   rootElement?.removeEventListener("click", on_before_container_click, true);
+  if (preventScrollRestorer) {
+    preventScrollRestorer();
+    preventScrollRestorer = null;
+  }
 }
 export function isSameToolbar(_toolbar) {
   return _toolbar == toolbar;
@@ -114,7 +122,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
       y2 = screenRect.bottom - maxHeight - margin;
       result = `left: ${x2}px; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     }
-    closeButtonPos = `right: 0.5rem; top: calc(${y2}px + 0.25rem)`;
+    closeButtonPos = `right: 0.5rem; bottom: calc(${margin + maxHeight}px - 1.75rem)`;
   } else {
     let myRect = null;
     if (!fresh) {
@@ -161,9 +169,10 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
     {/if}
 </div>
 
-<style>
+<!-- use usePreventScroll instead -->
+<!--style>
     :global(body:has(#__hd_svelte_floating_container[visible="true"])) 
     {
         overflow: hidden;
     }
-</style>
+</style-->

package/components/contextmenu.svelte

@@ -13,6 +13,7 @@ import {
   SHOW_MENU_LEFT
 } from "./menu";
 import { FaTimes } from "svelte-icons/fa";
+import { usePreventScroll } from "./react-aria/preventScroll";
 export let widthPx = 400;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
 export let owner_menu_item = void 0;
@@ -49,8 +50,9 @@ function calculatePosition(x2, y2, visible2, fresh) {
         myRect = null;
       }
     }
+    let maxHeight;
     if (myRect) {
-      let maxHeight = screenRect.height / 2 - margin;
+      maxHeight = screenRect.height / 2 - margin;
       if (myRect.height < maxHeight)
         maxHeight = myRect.height;
       const width = screenRect.width - 2 * margin;
@@ -58,13 +60,13 @@ function calculatePosition(x2, y2, visible2, fresh) {
       y2 = screenRect.bottom - maxHeight - margin;
       result = `left: ${x2}px; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     } else {
-      const maxHeight = screenRect.height / 2 - margin;
+      maxHeight = screenRect.height / 2 - margin;
       const width = screenRect.width - 2 * margin;
       x2 = margin;
       y2 = screenRect.bottom - maxHeight - margin;
       result = `left: ${x2}px; bottom: ${margin}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     }
-    closeButtonPos = `right: 0.5rem; top: calc(${y2}px + 0.25rem)`;
+    closeButtonPos = `right: 0.5rem; bottom: calc(${margin + maxHeight}px - 1.75rem)`;
   } else {
     let myRect = null;
     if (!fresh) {
@@ -164,6 +166,7 @@ function intersects(lpRect1, lpRect2) {
   const bottom = Math.min(lpRect1.bottom, lpRect2.bottom);
   return left <= right && top <= bottom;
 }
+let preventScrollRestorer = null;
 export async function show(around, _operations, preference = 0) {
   if (around instanceof DOMRect) {
     switch (preference) {
@@ -199,6 +202,8 @@ export async function show(around, _operations, preference = 0) {
   if (is_root_menu) {
     hide_window_indicator = 0;
     window.addEventListener("click", on_before_window_click, true);
+    if (isDeviceSmallerThan("sm"))
+      preventScrollRestorer = usePreventScroll();
   }
   if (isDeviceSmallerThan("sm")) {
     $fabHiddenDueToPopup = true;
@@ -221,6 +226,10 @@ export function hide() {
   css_position = calculatePosition(x, y, false, false);
   window.removeEventListener("click", on_before_window_click, true);
   menu_root?.removeEventListener("click", on_before_container_click, true);
+  if (preventScrollRestorer) {
+    preventScrollRestorer();
+    preventScrollRestorer = null;
+  }
 }
 export function getRenderedRect() {
   if (menu_root)
@@ -485,9 +494,11 @@ function isOperationDisabled(operation) {
     {/each}
 </div>
 
-<style>
-    :global(body:has(#__hd_svelte_contextmenu[visible="true"])) 
+<!-- use usePreventScroll instead -->
+<!--style>
+    :global(#__hd_svelte_layout_root:has(#__hd_svelte_contextmenu[visible="true"])) 
     {
         overflow: hidden;
+        position: fixed;
     }
-</style>
+</style-->

package/components/document/internal/palette.svelte

@@ -77,7 +77,6 @@ export function show(x, y, up = false) {
     setTimeout(() => {
       const rect = paletteElement.getBoundingClientRect();
       closeButtonPos = `right: 0.5rem; top: 0.25rem`;
-      console.log("closeButtonPos", closeButtonPos);
     }, 0);
   }
 }

package/components/react-aria/chain.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Calls all functions in the order they were chained with the same arguments.
+ */
+export declare function chain(...callbacks: any[]): (...args: any[]) => void;

package/components/react-aria/chain.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/**
+ * Calls all functions in the order they were chained with the same arguments.
+ */
+export function chain(...callbacks) {
+    return (...args) => {
+        for (let callback of callbacks) {
+            if (typeof callback === 'function') {
+                callback(...args);
+            }
+        }
+    };
+}

package/components/react-aria/getScrollParent.d.ts

@@ -0,0 +1 @@
+export declare function getScrollParent(node: Element, checkForOverflow?: boolean): Element;

package/components/react-aria/getScrollParent.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { isScrollable } from './isScrollable';
+export function getScrollParent(node, checkForOverflow) {
+    let scrollableNode = node;
+    if (isScrollable(scrollableNode, checkForOverflow)) {
+        scrollableNode = scrollableNode.parentElement;
+    }
+    while (scrollableNode && !isScrollable(scrollableNode, checkForOverflow)) {
+        scrollableNode = scrollableNode.parentElement;
+    }
+    return scrollableNode || document.scrollingElement || document.documentElement;
+}

package/components/react-aria/isScrollable.d.ts

@@ -0,0 +1 @@
+export declare function isScrollable(node: Element | null, checkForOverflow?: boolean): boolean;

package/components/react-aria/isScrollable.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+export function isScrollable(node, checkForOverflow) {
+    if (!node) {
+        return false;
+    }
+    let style = window.getComputedStyle(node);
+    let isScrollable = /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+    if (isScrollable && checkForOverflow) {
+        isScrollable = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
+    }
+    return isScrollable;
+}

package/components/react-aria/keybaord.d.ts

@@ -0,0 +1,8 @@
+interface Event {
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+}
+export declare function isCtrlKeyPressed(e: Event): boolean;
+export declare function willOpenKeyboard(target: Element): boolean;
+export {};

package/components/react-aria/keybaord.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { isMac } from './platform';
+export function isCtrlKeyPressed(e) {
+    if (isMac()) {
+        return e.metaKey;
+    }
+    return e.ctrlKey;
+}
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+    'checkbox',
+    'radio',
+    'range',
+    'color',
+    'file',
+    'image',
+    'button',
+    'submit',
+    'reset'
+]);
+export function willOpenKeyboard(target) {
+    return ((target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+        target instanceof HTMLTextAreaElement ||
+        (target instanceof HTMLElement && target.isContentEditable));
+}

package/components/react-aria/platform.d.ts

@@ -0,0 +1,9 @@
+export declare const isMac: () => boolean;
+export declare const isIPhone: () => boolean;
+export declare const isIPad: () => boolean;
+export declare const isIOS: () => boolean;
+export declare const isAppleDevice: () => boolean;
+export declare const isWebKit: () => boolean;
+export declare const isChrome: () => boolean;
+export declare const isAndroid: () => boolean;
+export declare const isFirefox: () => boolean;

package/components/react-aria/platform.js

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+function testUserAgent(re) {
+    if (typeof window === 'undefined' || window.navigator == null) {
+        return false;
+    }
+    let brands = window.navigator['userAgentData']?.brands;
+    return Array.isArray(brands) && brands.some((brand) => re.test(brand.brand)) ||
+        re.test(window.navigator.userAgent);
+}
+function testPlatform(re) {
+    return typeof window !== 'undefined' && window.navigator != null
+        ? re.test(window.navigator['userAgentData']?.platform || window.navigator.platform)
+        : false;
+}
+function cached(fn) {
+    if (process.env.NODE_ENV === 'test') {
+        return fn;
+    }
+    let res = null;
+    return () => {
+        if (res == null) {
+            res = fn();
+        }
+        return res;
+    };
+}
+export const isMac = cached(function () {
+    return testPlatform(/^Mac/i);
+});
+export const isIPhone = cached(function () {
+    return testPlatform(/^iPhone/i);
+});
+export const isIPad = cached(function () {
+    return testPlatform(/^iPad/i) ||
+        // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+        (isMac() && navigator.maxTouchPoints > 1);
+});
+export const isIOS = cached(function () {
+    return isIPhone() || isIPad();
+});
+export const isAppleDevice = cached(function () {
+    return isMac() || isIOS();
+});
+export const isWebKit = cached(function () {
+    return testUserAgent(/AppleWebKit/i) && !isChrome();
+});
+export const isChrome = cached(function () {
+    return testUserAgent(/Chrome/i);
+});
+export const isAndroid = cached(function () {
+    return testUserAgent(/Android/i);
+});
+export const isFirefox = cached(function () {
+    return testUserAgent(/Firefox/i);
+});

package/components/react-aria/preventScroll.d.ts

@@ -0,0 +1,11 @@
+interface PreventScrollOptions {
+    /** Whether the scroll lock is disabled. */
+    isDisabled?: boolean;
+}
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+export declare function usePreventScroll(options?: PreventScrollOptions): void;
+export {};

package/components/react-aria/preventScroll.js

@@ -0,0 +1,246 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { isIOS } from './platform';
+import { willOpenKeyboard } from './keybaord';
+import { isScrollable } from './isScrollable';
+import { getScrollParent } from './getScrollParent';
+import { chain } from './chain';
+const visualViewport = typeof document !== 'undefined' && window.visualViewport;
+// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
+let preventScrollCount = 0;
+let restore;
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+/*export function usePreventScroll(options: PreventScrollOptions = {}): void {
+  let {isDisabled} = options;
+
+  useLayoutEffect(() => {
+    if (isDisabled) {
+      return;
+    }
+
+    preventScrollCount++;
+    if (preventScrollCount === 1) {
+      if (isIOS()) {
+        restore = preventScrollMobileSafari();
+      } else {
+        restore = preventScrollStandard();
+      }
+    }
+
+    return () => {
+      preventScrollCount--;
+      if (preventScrollCount === 0) {
+        restore();
+      }
+    };
+  }, [isDisabled]);
+}
+*/
+export function usePreventScroll(options = {}) {
+    let { isDisabled } = options;
+    preventScrollCount++;
+    if (preventScrollCount === 1) {
+        if (isIOS()) {
+            restore = preventScrollMobileSafari();
+        }
+        else {
+            restore = preventScrollStandard();
+        }
+    }
+    return () => {
+        preventScrollCount--;
+        if (preventScrollCount === 0) {
+            restore();
+        }
+    };
+}
+// For most browsers, all we need to do is set `overflow: hidden` on the root element, and
+// add some padding to prevent the page from shifting when the scrollbar is hidden.
+function preventScrollStandard() {
+    let scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    return chain(scrollbarWidth > 0 &&
+        // Use scrollbar-gutter when supported because it also works for fixed positioned elements.
+        ('scrollbarGutter' in document.documentElement.style
+            ? setStyle(document.documentElement, 'scrollbarGutter', 'stable')
+            : setStyle(document.documentElement, 'paddingRight', `${scrollbarWidth}px`)), setStyle(document.documentElement, 'overflow', 'hidden'));
+}
+// Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Set `overscroll-behavior: contain` on nested scrollable regions so they do not scroll the page when at
+//    the top or bottom. Work around a bug where this does not work when the element does not actually overflow
+//    by preventing default in a `touchmove` event. This is best effort: we can't prevent default when pinch
+//    zooming or when an element contains text selection, which may allow scrolling in some cases.
+// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
+// 4. When focus moves to an input, create an off screen input and focus that temporarily. This prevents 
+//    Safari from scrolling the page. After a small delay, focus the real input and scroll it into view
+//    ourselves, without scrolling the whole page.
+function preventScrollMobileSafari() {
+    let scrollable;
+    let allowTouchMove = false;
+    let onTouchStart = (e) => {
+        // Store the nearest scrollable parent element from the element that the user touched.
+        let target = e.target;
+        scrollable = isScrollable(target) ? target : getScrollParent(target, true);
+        allowTouchMove = false;
+        // If the target is selected, don't preventDefault in touchmove to allow user to adjust selection.
+        let selection = target.ownerDocument.defaultView.getSelection();
+        if (selection && !selection.isCollapsed && selection.containsNode(target, true)) {
+            allowTouchMove = true;
+        }
+        // If this is a focused input element with a selected range, allow user to drag the selection handles.
+        if ('selectionStart' in target &&
+            'selectionEnd' in target &&
+            target.selectionStart < target.selectionEnd &&
+            target.ownerDocument.activeElement === target) {
+            allowTouchMove = true;
+        }
+    };
+    // Prevent scrolling up when at the top and scrolling down when at the bottom
+    // of a nested scrollable area, otherwise mobile Safari will start scrolling
+    // the window instead.
+    // This must be applied before the touchstart event as of iOS 26, so inject it as a <style> element.
+    let style = document.createElement('style');
+    style.textContent = `
+@layer {
+  * {
+    overscroll-behavior: contain;
+  }
+}`.trim();
+    document.head.prepend(style);
+    let onTouchMove = (e) => {
+        // Allow pinch-zooming.
+        if (e.touches.length === 2 || allowTouchMove) {
+            return;
+        }
+        // Prevent scrolling the window.
+        if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
+            e.preventDefault();
+            return;
+        }
+        // overscroll-behavior should prevent scroll chaining, but currently does not
+        // if the element doesn't actually overflow. https://bugs.webkit.org/show_bug.cgi?id=243452
+        // This checks that both the width and height do not overflow, otherwise we might
+        // block horizontal scrolling too. In that case, adding `touch-action: pan-x` to
+        // the element will prevent vertical page scrolling. We can't add that automatically
+        // because it must be set before the touchstart event.
+        if (scrollable.scrollHeight === scrollable.clientHeight && scrollable.scrollWidth === scrollable.clientWidth) {
+            e.preventDefault();
+        }
+    };
+    let onBlur = (e) => {
+        let target = e.target;
+        let relatedTarget = e.relatedTarget;
+        if (relatedTarget && willOpenKeyboard(relatedTarget)) {
+            // Focus without scrolling the whole page, and then scroll into view manually.
+            relatedTarget.focus({ preventScroll: true });
+            scrollIntoViewWhenReady(relatedTarget, willOpenKeyboard(target));
+        }
+        else if (!relatedTarget) {
+            // When tapping the Done button on the keyboard, focus moves to the body.
+            // FocusScope will then restore focus back to the input. Later when tapping
+            // the same input again, it is already focused, so no blur event will fire,
+            // resulting in the flow above never running and Safari's native scrolling occurring.
+            // Instead, move focus to the parent focusable element (e.g. the dialog).
+            let focusable = target.parentElement?.closest('[tabindex]');
+            focusable?.focus({ preventScroll: true });
+        }
+    };
+    // Override programmatic focus to scroll into view without scrolling the whole page.
+    let focus = HTMLElement.prototype.focus;
+    HTMLElement.prototype.focus = function (opts) {
+        // Track whether the keyboard was already visible before.
+        let wasKeyboardVisible = document.activeElement != null && willOpenKeyboard(document.activeElement);
+        // Focus the element without scrolling the page.
+        focus.call(this, { ...opts, preventScroll: true });
+        if (!opts || !opts.preventScroll) {
+            scrollIntoViewWhenReady(this, wasKeyboardVisible);
+        }
+    };
+    let removeEvents = chain(addEvent(document, 'touchstart', onTouchStart, { passive: false, capture: true }), addEvent(document, 'touchmove', onTouchMove, { passive: false, capture: true }), addEvent(document, 'blur', onBlur, true));
+    return () => {
+        removeEvents();
+        style.remove();
+        HTMLElement.prototype.focus = focus;
+    };
+}
+// Sets a CSS property on an element, and returns a function to revert it to the previous value.
+function setStyle(element, style, value) {
+    let cur = element.style[style];
+    element.style[style] = value;
+    return () => {
+        element.style[style] = cur;
+    };
+}
+// Adds an event listener to an element, and returns a function to remove it.
+function addEvent(target, event, handler, options) {
+    // internal function, so it's ok to ignore the difficult to fix type error
+    // @ts-ignore
+    target.addEventListener(event, handler, options);
+    return () => {
+        // @ts-ignore
+        target.removeEventListener(event, handler, options);
+    };
+}
+function scrollIntoViewWhenReady(target, wasKeyboardVisible) {
+    if (wasKeyboardVisible || !visualViewport) {
+        // If the keyboard was already visible, scroll the target into view immediately.
+        scrollIntoView(target);
+    }
+    else {
+        // Otherwise, wait for the visual viewport to resize before scrolling so we can
+        // measure the correct position to scroll to.
+        visualViewport.addEventListener('resize', () => scrollIntoView(target), { once: true });
+    }
+}
+function scrollIntoView(target) {
+    let root = document.scrollingElement || document.documentElement;
+    let nextTarget = target;
+    while (nextTarget && nextTarget !== root) {
+        // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
+        let scrollable = getScrollParent(nextTarget);
+        if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) {
+            let scrollableRect = scrollable.getBoundingClientRect();
+            let targetRect = nextTarget.getBoundingClientRect();
+            if (targetRect.top < scrollableRect.top || targetRect.bottom > scrollableRect.top + nextTarget.clientHeight) {
+                let bottom = scrollableRect.bottom;
+                if (visualViewport) {
+                    bottom = Math.min(bottom, visualViewport.offsetTop + visualViewport.height);
+                }
+                // Center within the viewport.
+                let adjustment = (targetRect.top - scrollableRect.top) - ((bottom - scrollableRect.top) / 2 - targetRect.height / 2);
+                scrollable.scrollTo({
+                    // Clamp to the valid range to prevent over-scrolling.
+                    top: Math.max(0, Math.min(scrollable.scrollHeight - scrollable.clientHeight, scrollable.scrollTop + adjustment)),
+                    behavior: 'smooth'
+                });
+            }
+        }
+        nextTarget = scrollable.parentElement;
+    }
+}

package/dialog.svelte

@@ -4,12 +4,15 @@ import { pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPo
 import { isDeviceSmallerThan } from "./utils";
 import { FaTimes } from "svelte-icons/fa";
 import { i18n } from "./i18n.js";
+import { usePreventScroll } from "./components/react-aria/preventScroll";
 export let open = false;
+let preventScrollRestorer = null;
 export function show(on_close_callback = void 0) {
   open = true;
   close_callback = on_close_callback;
   if (isDeviceSmallerThan("sm")) {
     $fabHiddenDueToPopup = true;
+    preventScrollRestorer = usePreventScroll();
   }
 }
 export function hide() {
@@ -17,6 +20,10 @@ export function hide() {
     return;
   open = false;
   $fabHiddenDueToPopup = false;
+  if (preventScrollRestorer) {
+    preventScrollRestorer();
+    preventScrollRestorer = null;
+  }
 }
 let root;
 afterUpdate(
@@ -50,9 +57,10 @@ let close_callback = void 0;
   </div>
   {/if}
 
-<style>
+<!-- use usePreventScroll instead -->  
+<!--style>
     :global(body:has(#__hd_svelte_property_dialog_container[visible="true"])) 
     {
         overflow: hidden;
     }
-</style>
+</style-->

package/modal.svelte

@@ -4,6 +4,7 @@ import { pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPo
 import { isDeviceSmallerThan } from "./utils";
 import { FaTimes } from "svelte-icons/fa";
 import { i18n } from "./i18n.js";
+import { usePreventScroll } from "./components/react-aria/preventScroll";
 export let title = "";
 export let open = false;
 export let content = "";
@@ -17,11 +18,13 @@ export let okCaption = "OK";
 export let cancelCaption = i18n({ en: "Cancel", es: "Cancelar", pl: "Anuluj" });
 export let onOkCallback = void 0;
 export let onCancelCallback = void 0;
+let preventScrollRestorer = null;
 export function show(on_close_callback = void 0) {
   open = true;
   close_callback = on_close_callback;
   if (isDeviceSmallerThan("sm")) {
     $fabHiddenDueToPopup = true;
+    preventScrollRestorer = usePreventScroll();
   }
 }
 export function hide() {
@@ -29,6 +32,10 @@ export function hide() {
     return;
   open = false;
   $fabHiddenDueToPopup = false;
+  if (preventScrollRestorer) {
+    preventScrollRestorer();
+    preventScrollRestorer = null;
+  }
 }
 let root;
 afterUpdate(
@@ -136,9 +143,11 @@ function on_cancel(event) {
   </div>
   {/if}
 
-<style>
+
+<!-- use usePreventScroll instead -->
+<!--style>
     :global(body:has(#__hd_svelte_modal_container[visible="true"])) 
     {
         overflow: hidden;
     }
-</style>
+</style-->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.7.15",
+  "version": "1.7.17",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -138,6 +138,12 @@
     "./components/menu": "./components/menu.js",
     "./components/paginator.svelte": "./components/paginator.svelte",
     "./components/radio.svelte": "./components/radio.svelte",
+    "./components/react-aria/chain": "./components/react-aria/chain.js",
+    "./components/react-aria/getScrollParent": "./components/react-aria/getScrollParent.js",
+    "./components/react-aria/isScrollable": "./components/react-aria/isScrollable.js",
+    "./components/react-aria/keybaord": "./components/react-aria/keybaord.js",
+    "./components/react-aria/platform": "./components/react-aria/platform.js",
+    "./components/react-aria/preventScroll": "./components/react-aria/preventScroll.js",
     "./components/sidebar/sidebar.brand.svelte": "./components/sidebar/sidebar.brand.svelte",
     "./components/sidebar/sidebar.group.svelte": "./components/sidebar/sidebar.group.svelte",
     "./components/sidebar/sidebar.item.svelte": "./components/sidebar/sidebar.item.svelte",