@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.2-next.2

package/dist/focus-trap/FocusTrap.svelte

@@ -0,0 +1,332 @@
+<script lang="ts" module>import { getOwnerDocument } from "../utils/owner.js";
+import { history } from "../utils/active-element-history.js";
+import { useWatch } from "../hooks/use-watch.svelte.js";
+import { microTask } from "../utils/microTask.js";
+import { Focus, focusElement, focusIn, FocusResult } from "../utils/focus-management.js";
+import { useIsTopLayer } from "../hooks/use-is-top-layer.svelte.js";
+import { useIsMounted } from "../hooks/use-is-mounted.svelte.js";
+import { useEventListener } from "../hooks/use-event-listener.svelte.js";
+import { useTabDirection, Direction as TabDirection } from "../hooks/use-tab-direction.svelte.js";
+import { match } from "../utils/match.js";
+import { useDisposables } from "../utils/disposables.js";
+import Hidden, { HiddenFeatures } from "../internal/Hidden.svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+function resolveContainers(containers) {
+  if (!containers) return /* @__PURE__ */ new Set();
+  if (typeof containers === "function") return new Set(containers());
+  let all = /* @__PURE__ */ new Set();
+  for (let container of containers) {
+    if (container instanceof HTMLElement) {
+      all.add(container);
+    }
+  }
+  return all;
+}
+let DEFAULT_FOCUS_TRAP_TAG = "div";
+export var FocusTrapFeatures = /* @__PURE__ */ ((FocusTrapFeatures2) => {
+  FocusTrapFeatures2[FocusTrapFeatures2["None"] = 0] = "None";
+  FocusTrapFeatures2[FocusTrapFeatures2["InitialFocus"] = 1] = "InitialFocus";
+  FocusTrapFeatures2[FocusTrapFeatures2["TabLock"] = 2] = "TabLock";
+  FocusTrapFeatures2[FocusTrapFeatures2["FocusLock"] = 4] = "FocusLock";
+  FocusTrapFeatures2[FocusTrapFeatures2["RestoreFocus"] = 8] = "RestoreFocus";
+  FocusTrapFeatures2[FocusTrapFeatures2["AutoFocus"] = 16] = "AutoFocus";
+  return FocusTrapFeatures2;
+})(FocusTrapFeatures || {});
+function useRestoreElement(options) {
+  const { enabled } = $derived(options ?? { enabled: true });
+  let localHistory = $state(history.slice());
+  useWatch({
+    action: ([newEnabled], [oldEnabled]) => {
+      if (oldEnabled === true && newEnabled === false) {
+        microTask(() => {
+          localHistory.splice(0);
+        });
+      }
+      if (oldEnabled === false && newEnabled === true) {
+        localHistory = history.slice();
+      }
+    },
+    get dependencies() {
+      return [enabled, history, localHistory];
+    }
+  });
+  return {
+    get lastElement() {
+      return localHistory.find((x) => x != null && x.isConnected) ?? null;
+    }
+  };
+}
+function useRestoreFocus(options) {
+  const { features, ownerDocument } = $derived(options);
+  const enabled = $derived(Boolean(features & 8 /* RestoreFocus */));
+  const restoreElement = useRestoreElement({
+    get enabled() {
+      return enabled;
+    }
+  });
+  useWatch({
+    action: () => {
+      if (enabled) return;
+      if (ownerDocument?.activeElement === ownerDocument?.body) {
+        focusElement(restoreElement.lastElement);
+      }
+    },
+    get dependencies() {
+      return [enabled];
+    }
+  });
+  $effect(() => {
+    if (!enabled) return;
+    return () => focusElement(restoreElement.lastElement);
+  });
+}
+function useInitialFocus(options) {
+  const { features, ownerDocument, container, initialFocus, initialFocusFallback } = $derived(options);
+  let previousActiveElement = $state(null);
+  let enabled = useIsTopLayer({
+    get enabled() {
+      return Boolean(features & 1 /* InitialFocus */);
+    },
+    scope: "focus-trap#initial-focus"
+  });
+  let mounted = useIsMounted();
+  useWatch({
+    action: () => {
+      if (features === 0 /* None */) {
+        return;
+      }
+      if (!enabled) {
+        if (initialFocusFallback) {
+          focusElement(initialFocusFallback);
+        }
+        return;
+      }
+      let containerElement = container;
+      if (!containerElement) return;
+      microTask(() => {
+        if (!mounted.current) {
+          return;
+        }
+        let activeElement = ownerDocument?.activeElement;
+        if (initialFocus) {
+          if (initialFocus === activeElement) {
+            previousActiveElement = activeElement;
+            return;
+          }
+        } else if (containerElement.contains(activeElement)) {
+          previousActiveElement = activeElement;
+          return;
+        }
+        if (initialFocus) {
+          focusElement(initialFocus);
+        } else {
+          if (features & 16 /* AutoFocus */) {
+            if (focusIn(containerElement, Focus.First | Focus.AutoFocus) !== FocusResult.Error) {
+              return;
+            }
+          } else if (focusIn(containerElement, Focus.First) !== FocusResult.Error) {
+            return;
+          }
+          if (initialFocusFallback) {
+            focusElement(initialFocusFallback);
+            if (ownerDocument?.activeElement === initialFocusFallback) {
+              return;
+            }
+          }
+          console.warn("There are no focusable elements inside the <FocusTrap />");
+        }
+        previousActiveElement = ownerDocument?.activeElement;
+      });
+    },
+    get dependencies() {
+      return [initialFocusFallback, enabled, features];
+    }
+  });
+  return {
+    get value() {
+      return previousActiveElement;
+    },
+    set value(element) {
+      previousActiveElement = element;
+    }
+  };
+}
+function useFocusLock(options) {
+  let { features, ownerDocument, container, containers, previousActiveElement } = $derived(options);
+  const mounted = useIsMounted();
+  const enabled = $derived(Boolean(features & 4 /* FocusLock */));
+  useEventListener({
+    get element() {
+      return ownerDocument?.defaultView;
+    },
+    type: "focus",
+    listener: (event) => {
+      if (!enabled) return;
+      if (!mounted.current) return;
+      let allContainers = resolveContainers(containers);
+      if (container instanceof HTMLElement) allContainers.add(container);
+      let previous = previousActiveElement;
+      if (!previous) return;
+      let toElement = event.target;
+      if (toElement && toElement instanceof HTMLElement) {
+        if (!contains(allContainers, toElement)) {
+          event.preventDefault();
+          event.stopPropagation();
+          focusElement(previous);
+        } else {
+          options.previousActiveElement = toElement;
+          focusElement(toElement);
+        }
+      } else {
+        focusElement(previousActiveElement);
+      }
+    },
+    options: true
+  });
+}
+function contains(containers, element) {
+  for (let container of containers) {
+    if (container.contains(element)) return true;
+  }
+  return false;
+}
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG">let container = $state(null);
+let {
+  ref = $bindable(),
+  initialFocus,
+  initialFocusFallback,
+  containers,
+  features = FocusTrapFeatures.InitialFocus | FocusTrapFeatures.TabLock | FocusTrapFeatures.FocusLock | FocusTrapFeatures.RestoreFocus,
+  ...theirProps
+} = $props();
+const ownerDocument = $derived(getOwnerDocument(ref));
+useRestoreFocus({
+  get features() {
+    return features;
+  },
+  get ownerDocument() {
+    return ownerDocument;
+  }
+});
+let previousActiveElement = useInitialFocus({
+  get features() {
+    return features;
+  },
+  get ownerDocument() {
+    return ownerDocument;
+  },
+  get container() {
+    return container;
+  },
+  get initialFocus() {
+    return initialFocus;
+  },
+  get initialFocusFallback() {
+    return initialFocusFallback;
+  }
+});
+useFocusLock({
+  get features() {
+    return features;
+  },
+  get ownerDocument() {
+    return ownerDocument;
+  },
+  get container() {
+    return container;
+  },
+  get containers() {
+    return containers;
+  },
+  get previousActiveElement() {
+    return previousActiveElement.value;
+  },
+  set previousActiveElement(element) {
+    previousActiveElement.value = element;
+  }
+});
+const direction = useTabDirection();
+const handleFocus = (e) => {
+  let el = container;
+  if (!el) return;
+  let wrapper = process.env.NODE_ENV === "test" ? microTask : (cb) => cb();
+  wrapper(() => {
+    match(direction.current, {
+      [TabDirection.Forwards]: () => {
+        focusIn(el, Focus.First, {
+          skipElements: [e.relatedTarget, initialFocusFallback]
+        });
+      },
+      [TabDirection.Backwards]: () => {
+        focusIn(el, Focus.Last, {
+          skipElements: [e.relatedTarget, initialFocusFallback]
+        });
+      }
+    });
+  });
+};
+let tabLockEnabled = useIsTopLayer({
+  get enabled() {
+    return Boolean(features & FocusTrapFeatures.TabLock);
+  },
+  scope: "focus-trap#tab-lock"
+});
+const d = useDisposables();
+let recentlyUsedTabKey = $state(false);
+const ourProps = $derived({
+  onkeydown(e) {
+    if (e.key == "Tab") {
+      recentlyUsedTabKey = true;
+      d.requestAnimationFrame(() => {
+        recentlyUsedTabKey = false;
+      });
+    }
+  },
+  onblur(e) {
+    if (!(features & FocusTrapFeatures.FocusLock)) return;
+    let allContainers = resolveContainers(containers);
+    if (container instanceof HTMLElement) allContainers.add(container);
+    let relatedTarget = e.relatedTarget;
+    if (!(relatedTarget instanceof HTMLElement)) return;
+    if (relatedTarget.dataset.headlessuiFocusGuard === "true") {
+      return;
+    }
+    if (!contains(allContainers, relatedTarget)) {
+      if (recentlyUsedTabKey) {
+        focusIn(
+          container,
+          match(direction.current, {
+            [TabDirection.Forwards]: () => Focus.Next,
+            [TabDirection.Backwards]: () => Focus.Previous
+          }) | Focus.WrapAround,
+          { relativeTo: e.target }
+        );
+      } else if (e.target instanceof HTMLElement) {
+        focusElement(e.target);
+      }
+    }
+  }
+});
+</script>
+
+{#if tabLockEnabled}
+  <Hidden
+    as="button"
+    type="button"
+    data-headlessui-focus-guard
+    onfocus={handleFocus}
+    features={HiddenFeatures.Focusable}
+  />
+{/if}
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_FOCUS_TRAP_TAG} name="FocusTrap" bind:ref />
+{#if tabLockEnabled}
+  <Hidden
+    as="button"
+    type="button"
+    data-headlessui-focus-guard
+    onfocus={handleFocus}
+    features={HiddenFeatures.Focusable}
+  />
+{/if}

package/dist/focus-trap/FocusTrap.svelte.d.ts

@@ -0,0 +1,58 @@
+import type { ElementType, Props } from "../utils/types.js";
+type Containers = (() => Iterable<HTMLElement>) | Iterable<HTMLElement>;
+declare let DEFAULT_FOCUS_TRAP_TAG: "div";
+export declare enum FocusTrapFeatures {
+    /** No features enabled for the focus trap. */
+    None = 0,
+    /** Ensure that we move focus initially into the container. */
+    InitialFocus = 1,
+    /** Ensure that pressing `Tab` and `Shift+Tab` is trapped within the container. */
+    TabLock = 2,
+    /** Ensure that programmatically moving focus outside of the container is disallowed. */
+    FocusLock = 4,
+    /** Ensure that we restore the focus when unmounting the focus trap. */
+    RestoreFocus = 8,
+    /** Initial focus should look for the `data-autofocus` */
+    AutoFocus = 16
+}
+type FocusTrapRenderPropArg = {};
+type FocusTrapPropsWeControl = never;
+export type FocusTrapProps<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> = Props<TTag, FocusTrapRenderPropArg, FocusTrapPropsWeControl, {
+    initialFocus?: HTMLElement;
+    initialFocusFallback?: HTMLElement;
+    features?: FocusTrapFeatures;
+    containers?: Containers;
+}>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "features" | "containers" | "initialFocus" | "initialFocusFallback"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("../utils/types.js").Children<FocusTrapRenderPropArg> | undefined;
+        ref?: HTMLElement;
+    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
+        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: FocusTrapRenderPropArg) => string) | undefined;
+    } : {}) & {
+        initialFocus?: HTMLElement;
+        initialFocusFallback?: HTMLElement;
+        features?: FocusTrapFeatures;
+        containers?: Containers;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
+    } & ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
+    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FocusTrap: $$IsomorphicComponent;
+type FocusTrap<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> = InstanceType<typeof FocusTrap<TTag>>;
+export default FocusTrap;

package/dist/hooks/document-overflow/adjust-scrollbar-padding.d.ts

@@ -0,0 +1,2 @@
+import type { ScrollLockStep } from "./overflow-store.js";
+export declare function adjustScrollbarPadding(): ScrollLockStep;

package/dist/hooks/document-overflow/adjust-scrollbar-padding.js

@@ -0,0 +1,18 @@
+export function adjustScrollbarPadding() {
+    let scrollbarWidthBefore;
+    return {
+        before({ doc }) {
+            let documentElement = doc.documentElement;
+            let ownerWindow = doc.defaultView ?? window;
+            scrollbarWidthBefore = Math.max(0, ownerWindow.innerWidth - documentElement.clientWidth);
+        },
+        after({ doc, d }) {
+            let documentElement = doc.documentElement;
+            // Account for the change in scrollbar width
+            // NOTE: This is a bit of a hack, but it's the only way to do this
+            let scrollbarWidthAfter = Math.max(0, documentElement.clientWidth - documentElement.offsetWidth);
+            let scrollbarWidth = Math.max(0, scrollbarWidthBefore - scrollbarWidthAfter);
+            d.style(documentElement, "paddingRight", `${scrollbarWidth}px`);
+        },
+    };
+}

package/dist/hooks/document-overflow/handle-ios-locking.d.ts

@@ -0,0 +1,6 @@
+import type { ScrollLockStep } from "./overflow-store.js";
+interface ContainerMetadata {
+    containers: (() => HTMLElement[])[];
+}
+export declare function handleIOSLocking(): ScrollLockStep<ContainerMetadata>;
+export {};

package/dist/hooks/document-overflow/handle-ios-locking.js

@@ -0,0 +1,134 @@
+import { disposables } from "../../utils/disposables.js";
+import { isIOS } from "../../utils/platform.js";
+export function handleIOSLocking() {
+    if (!isIOS()) {
+        return {};
+    }
+    return {
+        before({ doc, d, meta }) {
+            function inAllowedContainer(el) {
+                return meta.containers.flatMap((resolve) => resolve()).some((container) => container.contains(el));
+            }
+            d.microTask(() => {
+                // We need to be able to offset the body with the current scroll position. However, if you
+                // have `scroll-behavior: smooth` set, then changing the scrollTop in any way shape or form
+                // will trigger a "smooth" scroll and the new position would be incorrect.
+                //
+                // This is why we are forcing the `scroll-behavior: auto` here, and then restoring it later.
+                // We have to be a bit careful, because removing `scroll-behavior: auto` back to
+                // `scroll-behavior: smooth` can start triggering smooth scrolling. Delaying this by a
+                // microTask will guarantee that everything is done such that both enter/exit of the Dialog is
+                // not using smooth scrolling.
+                if (window.getComputedStyle(doc.documentElement).scrollBehavior !== "auto") {
+                    let _d = disposables();
+                    _d.style(doc.documentElement, "scrollBehavior", "auto");
+                    d.add(() => d.microTask(() => _d.dispose()));
+                }
+                // Keep track of the current scroll position so that we can restore the scroll position if
+                // it has changed in the meantime.
+                let scrollPosition = window.scrollY ?? window.pageYOffset;
+                // Relatively hacky, but if you click a link like `<a href="#foo">` in the Dialog, and there
+                // exists an element on the page (outside of the Dialog) with that id, then the browser will
+                // scroll to that position. However, this is not the case if the element we want to scroll to
+                // is higher and the browser needs to scroll up, but it doesn't do that.
+                //
+                // Let's try and capture that element and store it, so that we can later scroll to it once the
+                // Dialog closes.
+                let scrollToElement = null;
+                d.addEventListener(doc, "click", (e) => {
+                    if (!(e.target instanceof HTMLElement)) {
+                        return;
+                    }
+                    try {
+                        let anchor = e.target.closest("a");
+                        if (!anchor)
+                            return;
+                        let { hash } = new URL(anchor.href);
+                        let el = doc.querySelector(hash);
+                        if (el && !inAllowedContainer(el)) {
+                            scrollToElement = el;
+                        }
+                    }
+                    catch (err) { }
+                }, true);
+                // Rely on overscrollBehavior to prevent scrolling outside of the Dialog.
+                d.addEventListener(doc, "touchstart", (e) => {
+                    if (e.target instanceof HTMLElement) {
+                        if (inAllowedContainer(e.target)) {
+                            // Find the root of the allowed containers
+                            let rootContainer = e.target;
+                            while (rootContainer.parentElement && inAllowedContainer(rootContainer.parentElement)) {
+                                rootContainer = rootContainer.parentElement;
+                            }
+                            d.style(rootContainer, "overscrollBehavior", "contain");
+                        }
+                        else {
+                            d.style(e.target, "touchAction", "none");
+                        }
+                    }
+                });
+                d.addEventListener(doc, "touchmove", (e) => {
+                    // Check if we are scrolling inside any of the allowed containers, if not let's cancel the event!
+                    if (e.target instanceof HTMLElement) {
+                        // Some inputs like `<input type=range>` use touch events to
+                        // allow interaction. We should not prevent this event.
+                        if (e.target.tagName === "INPUT") {
+                            return;
+                        }
+                        if (inAllowedContainer(e.target)) {
+                            // Even if we are in an allowed container, on iOS the main page can still scroll, we
+                            // have to make sure that we `event.preventDefault()` this event to prevent that.
+                            //
+                            // However, if we happen to scroll on an element that is overflowing, or any of its
+                            // parents are overflowing, then we should not call `event.preventDefault()` because
+                            // otherwise we are preventing the user from scrolling inside that container which
+                            // is not what we want.
+                            let scrollableParent = e.target;
+                            while (scrollableParent.parentElement &&
+                                // Assumption: We are always used in a Headless UI Portal. Once we reach the
+                                // portal itself, we can stop crawling up the tree.
+                                scrollableParent.dataset.headlessuiPortal !== "") {
+                                // Check if the scrollable container is overflowing or not.
+                                //
+                                // NOTE: we could check the `overflow`, `overflow-y` and `overflow-x` properties
+                                // but when there is no overflow happening then the `overscrollBehavior` doesn't
+                                // seem to work and the main page will still scroll. So instead we check if the
+                                // scrollable container is overflowing or not and use that heuristic instead.
+                                if (scrollableParent.scrollHeight > scrollableParent.clientHeight ||
+                                    scrollableParent.scrollWidth > scrollableParent.clientWidth) {
+                                    break;
+                                }
+                                scrollableParent = scrollableParent.parentElement;
+                            }
+                            // We crawled up the tree until the beginning of the Portal, let's prevent the
+                            // event if this is the case. If not, then we are in a container where we are
+                            // allowed to scroll so we don't have to prevent the event.
+                            if (scrollableParent.dataset.headlessuiPortal === "") {
+                                e.preventDefault();
+                            }
+                        }
+                        // We are not in an allowed container, so let's prevent the event.
+                        else {
+                            e.preventDefault();
+                        }
+                    }
+                }, { passive: false });
+                // Restore scroll position if a scrollToElement was captured.
+                d.add(() => {
+                    let newScrollPosition = window.scrollY ?? window.pageYOffset;
+                    // If the scroll position changed, then we can restore it to the previous value. This will
+                    // happen if you focus an input field and the browser scrolls for you.
+                    if (scrollPosition !== newScrollPosition) {
+                        window.scrollTo(0, scrollPosition);
+                    }
+                    // If we captured an element that should be scrolled to, then we can try to do that if the
+                    // element is still connected (aka, still in the DOM).
+                    if (scrollToElement && scrollToElement.isConnected) {
+                        scrollToElement.scrollIntoView({ block: "nearest" });
+                        scrollToElement = null;
+                    }
+                });
+            });
+        },
+    };
+}

package/dist/hooks/document-overflow/overflow-store.d.ts

@@ -0,0 +1,19 @@
+import { type Disposables } from "../../utils/disposables.js";
+interface DocEntry {
+    doc: Document;
+    count: number;
+    d: Disposables;
+    meta: Set<MetaFn>;
+}
+export type MetaFn = (meta: Record<string, any>) => Record<string, any>;
+export interface Context<MetaType extends Record<string, any> = any> {
+    doc: Document;
+    d: Disposables;
+    meta: MetaType;
+}
+export interface ScrollLockStep<MetaType extends Record<string, any> = any> {
+    before?(ctx: Context<MetaType>): void;
+    after?(ctx: Context<MetaType>): void;
+}
+export declare let overflows: import("../../utils/store.js").Store<Map<Document, DocEntry>, "PUSH" | "POP" | "SCROLL_PREVENT" | "SCROLL_ALLOW" | "TEARDOWN">;
+export {};

package/dist/hooks/document-overflow/overflow-store.js

@@ -0,0 +1,76 @@
+import { disposables } from "../../utils/disposables.js";
+import { createStore } from "../../utils/store.js";
+import { adjustScrollbarPadding } from "./adjust-scrollbar-padding.js";
+import { handleIOSLocking } from "./handle-ios-locking.js";
+import { preventScroll } from "./prevent-scroll.js";
+function buildMeta(fns) {
+    let tmp = {};
+    for (let fn of fns) {
+        Object.assign(tmp, fn(tmp));
+    }
+    return tmp;
+}
+export let overflows = createStore(() => new Map(), {
+    PUSH(doc, meta) {
+        let entry = this.get(doc) ?? {
+            doc,
+            count: 0,
+            d: disposables(),
+            meta: new Set(),
+        };
+        entry.count++;
+        entry.meta.add(meta);
+        this.set(doc, entry);
+        return this;
+    },
+    POP(doc, meta) {
+        let entry = this.get(doc);
+        if (entry) {
+            entry.count--;
+            entry.meta.delete(meta);
+        }
+        return this;
+    },
+    SCROLL_PREVENT({ doc, d, meta }) {
+        let ctx = {
+            doc,
+            d,
+            meta: buildMeta(meta),
+        };
+        let steps = [handleIOSLocking(), adjustScrollbarPadding(), preventScroll()];
+        // Run all `before` actions together
+        steps.forEach(({ before }) => before?.(ctx));
+        // Run all `after` actions together
+        steps.forEach(({ after }) => after?.(ctx));
+    },
+    SCROLL_ALLOW({ d }) {
+        d.dispose();
+    },
+    TEARDOWN({ doc }) {
+        this.delete(doc);
+    },
+});
+// Update the document overflow state when the store changes
+// This MUST happen outside of react for this to work properly.
+overflows.subscribe(() => {
+    let docs = overflows.getSnapshot();
+    let styles = new Map();
+    // Read data from all the documents
+    for (let [doc] of docs) {
+        styles.set(doc, doc.documentElement.style.overflow);
+    }
+    // Write data to all the documents
+    for (let entry of docs.values()) {
+        let isHidden = styles.get(entry.doc) === "hidden";
+        let isLocked = entry.count !== 0;
+        let willChange = (isLocked && !isHidden) || (!isLocked && isHidden);
+        if (willChange) {
+            overflows.dispatch(entry.count > 0 ? "SCROLL_PREVENT" : "SCROLL_ALLOW", entry);
+        }
+        // We have to clean up after ourselves so we don't leak memory
+        // Using a WeakMap would be ideal, but it's not iterable
+        if (entry.count === 0) {
+            overflows.dispatch("TEARDOWN", entry);
+        }
+    }
+});

package/dist/hooks/document-overflow/prevent-scroll.d.ts

@@ -0,0 +1,2 @@
+import type { ScrollLockStep } from "./overflow-store.js";
+export declare function preventScroll(): ScrollLockStep;

package/dist/hooks/document-overflow/prevent-scroll.js

@@ -0,0 +1,7 @@
+export function preventScroll() {
+    return {
+        before({ doc, d }) {
+            d.style(doc.documentElement, "overflow", "hidden");
+        },
+    };
+}

package/dist/hooks/document-overflow/use-document-overflow.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare function useDocumentOverflowLockedEffect(options: {
+    shouldBeLocked: boolean;
+    doc: Document | null;
+    meta?: (meta: Record<string, any>) => Record<string, any>;
+}): {
+    readonly locked: boolean;
+};