@pathscale/ui 3.0.0 → 3.1.0

package/dist/hooks/connection/createConnectionSettings.d.ts

@@ -0,0 +1,128 @@
+import type { Accessor } from "solid-js";
+/**
+ * Where an application points itself, and how that survives a reload.
+ *
+ * Every property in this family ships a "connection settings" page: a toggle,
+ * one or more backend URLs, an app id, and a save that reconfigures the
+ * transport. Six of them had written it separately, in two different shapes and
+ * with different bugs, which is what this replaces.
+ *
+ * The storage model is per-endpoint rather than global. Four sites had a single
+ * `useCustomUrl` covering every backend at once; two had already grown a flag
+ * per backend, because pointing the API at a local instance while leaving auth
+ * on production is the ordinary case. Per-endpoint is the shape that covers
+ * both, and {@link ConnectionSettingsStore.setUseCustom} flips them together
+ * for a page that only wants one switch.
+ */
+export interface ConnectionEndpoint {
+    /** Stable key. Names the value in storage and in {@link ConnectionSettingsStore.urls}. */
+    name: string;
+    /** The address used whenever this endpoint's override is off. */
+    fallback: string;
+    /**
+     * Reject an address before it is saved. Return a message to refuse it, or
+     * nothing to accept.
+     *
+     * Defaults to {@link isAbsoluteUrl}: the value has to parse as an absolute
+     * URL. That is deliberately weak, because this hook does not know what a
+     * given endpoint speaks. An endpoint that knows should say so -- a WebSocket
+     * transport handed `http://…` fails at connect time, long after the page
+     * that could have explained it has gone.
+     */
+    validate?: (url: string) => string | undefined;
+}
+/** What {@link ConnectionSettingsStore.apply} hands to `onApply`. */
+export interface ConnectionSettingsApplied {
+    /** Resolved per endpoint, overrides taken into account. Never empty. */
+    urls: Readonly<Record<string, string>>;
+    appPublicId: string;
+    /** Which endpoints the resolved address came from an override for. */
+    overrides: Readonly<Record<string, boolean>>;
+}
+/**
+ * Whether a bracketed host is an IPv6 literal.
+ *
+ * `https://[1:2:3]` is not an address, and a character class of hex digits and
+ * colons said it was. This is the shape the URL Standard describes: eight
+ * 16-bit groups, or fewer with exactly one `::` standing for the run of zeroes
+ * it elides, optionally ending in a dotted IPv4 form.
+ *
+ * Written out rather than folded into one pattern because the `::` rule is a
+ * count, not a shape: each half has to parse, and together they have to leave
+ * at least one group for the `::` to stand for.
+ */
+export declare const isIpv6Literal: (host: string) => boolean;
+export declare const isAbsoluteUrl: (url: string) => string | undefined;
+export interface ConnectionSettingsOptions {
+    /** `localStorage` key. Namespace it per application; two apps on one origin would collide. */
+    storageKey: string;
+    endpoints: readonly ConnectionEndpoint[];
+    /** The application's own id, when it has one. Stored alongside the URLs. */
+    appPublicId?: string;
+    /**
+     * Run after a successful save or reset, with everything that was applied.
+     *
+     * This is where an application reconfigures its transport. It is awaited, so
+     * `isApplying` covers the reconnect rather than just the write.
+     *
+     * It receives the whole applied state, not only the URLs: a site that stores
+     * an app id here reconfigures its identity from the same call, and passing
+     * the URLs alone left it reaching back into the store it had just handed to
+     * this hook.
+     */
+    onApply?: (applied: ConnectionSettingsApplied) => void | Promise<void>;
+}
+export interface ConnectionSettingsState {
+    /** Per endpoint: is the override in use. Absent means no. */
+    overrides: Record<string, boolean>;
+    /** Per endpoint: the address to use when its override is on. */
+    urls: Record<string, string>;
+    appPublicId: string;
+}
+export interface ConnectionSettingsStore {
+    /** What is stored, override flags included. Read this to populate a form. */
+    readonly state: ConnectionSettingsState;
+    /**
+     * The address for each endpoint after overrides are applied. This is what a
+     * transport should read; it never contains an empty string.
+     */
+    readonly urls: Readonly<Record<string, string>>;
+    /** The address each endpoint falls back to, by name. What "not overridden" means. */
+    readonly fallbacks: Readonly<Record<string, string>>;
+    /** True while `onApply` is in flight. */
+    readonly isApplying: boolean;
+    /** Nothing has been overridden and the app id is untouched. */
+    readonly isAtDefaults: boolean;
+    /** True when this endpoint is overridden. */
+    isOverridden(name: string): boolean;
+    /**
+     * Why this address cannot be saved for this endpoint, or `undefined` if it
+     * can. Empty is always refused; beyond that the endpoint's own `validate`
+     * decides, defaulting to {@link isAbsoluteUrl}.
+     *
+     * A settings page is the last place able to explain a bad address. Saved
+     * unchecked, the value survives a failed reconnect and is still there on the
+     * next launch, with nothing on screen saying why nothing connects.
+     */
+    validate(name: string, url: string): string | undefined;
+    /**
+     * Set an endpoint's override.
+     *
+     * Returns the reason it was refused, or `undefined` when it was stored. A
+     * value written here becomes an active, persisted override, so it has to
+     * pass the same check {@link ConnectionSettingsStore.validate} applies;
+     * an invalid one is not stored at all. Keep it as a draft in the UI instead.
+     */
+    setUrl(name: string, url: string): string | undefined;
+    setOverride(name: string, on: boolean): void;
+    /** Flip every endpoint together, for a page with one switch. */
+    setUseCustom(on: boolean): void;
+    setAppPublicId(id: string): void;
+    /** Drop every override and forget the stored copy. Does not apply. */
+    reset(): void;
+    /** Persist, then hand the resolved addresses to `onApply`. */
+    apply(): Promise<void>;
+    /** For a component that wants to track the state rather than read it once. */
+    state$: Accessor<ConnectionSettingsState>;
+}
+export declare const createConnectionSettings: (options: ConnectionSettingsOptions) => ConnectionSettingsStore;

package/dist/hooks/connection/createConnectionSettings.js

@@ -0,0 +1,211 @@
+import { createEffect, createRoot, createSignal } from "solid-js";
+const ABSOLUTE_URL = /^[a-z][a-z0-9+.-]*:\/\/(\[[^\]\s]*\]|[^\s/?#:]+)(?::(\d{1,5}))?(?:[/?#]\S*)?$/i;
+const IPV6_GROUP = "[0-9a-f]{1,4}";
+const IPV4_TAIL = "(?:(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)";
+const IPV6_FULL = new RegExp(`^(?:${IPV6_GROUP}:){6}(?:${IPV6_GROUP}:${IPV6_GROUP}|${IPV4_TAIL})$`, "i");
+const IPV6_PIECES = new RegExp(`^(?:${IPV6_GROUP}(?::${IPV6_GROUP})*)?$`, "i");
+const isIpv6Literal = (host)=>{
+    if (IPV6_FULL.test(host)) return true;
+    const halves = host.split("::");
+    if (2 !== halves.length) return false;
+    const [head, tail] = halves;
+    const embeddedV4 = new RegExp(`(?:^|:)(${IPV4_TAIL})$`, "i").exec(tail);
+    const groups = embeddedV4 ? tail.slice(0, tail.length - embeddedV4[1].length).replace(/:$/, "") : tail;
+    if (!IPV6_PIECES.test(head)) return false;
+    if (!IPV6_PIECES.test(groups)) return false;
+    const count = (part)=>"" === part ? 0 : part.split(":").length;
+    return count(head) + count(groups) + (embeddedV4 ? 2 : 0) <= 7;
+};
+const isAbsoluteUrl = (url)=>{
+    const match = ABSOLUTE_URL.exec(url);
+    if (!match) return `${url} is not an absolute address (expected scheme://host)`;
+    const [, host, port] = match;
+    if (host.startsWith("[") && !isIpv6Literal(host.slice(1, -1))) return `${url} does not contain a valid IPv6 address`;
+    if (void 0 !== port && Number(port) > 65535) return `${url} has a port outside 0-65535`;
+};
+const isRecord = (value)=>"object" == typeof value && null !== value && !Array.isArray(value);
+const createConnectionSettings = (options)=>{
+    const { storageKey, endpoints, appPublicId = "", onApply } = options;
+    const fallbacks = Object.freeze(Object.fromEntries(endpoints.map((e)=>[
+            e.name,
+            e.fallback
+        ])));
+    const defaults = ()=>({
+            overrides: {},
+            urls: Object.fromEntries(endpoints.map((e)=>[
+                    e.name,
+                    e.fallback
+                ])),
+            appPublicId
+        });
+    const read = ()=>{
+        const base = defaults();
+        try {
+            if ("u" < typeof localStorage) return base;
+            const raw = localStorage.getItem(storageKey);
+            if (!raw) return base;
+            const parsed = JSON.parse(raw);
+            if (!isRecord(parsed)) return base;
+            const overrides = {};
+            const urls = {
+                ...base.urls
+            };
+            const storedOverrides = isRecord(parsed.overrides) ? parsed.overrides : {};
+            const storedUrls = isRecord(parsed.urls) ? parsed.urls : {};
+            for (const endpoint of endpoints){
+                const url = storedUrls[endpoint.name];
+                const usable = "string" == typeof url && "" !== url && void 0 === (endpoint.validate ?? isAbsoluteUrl)(url);
+                if (usable) urls[endpoint.name] = url;
+                if (usable && true === storedOverrides[endpoint.name]) overrides[endpoint.name] = true;
+            }
+            return {
+                overrides,
+                urls,
+                appPublicId: "string" == typeof parsed.appPublicId ? parsed.appPublicId : base.appPublicId
+            };
+        } catch  {
+            return base;
+        }
+    };
+    const [state, setState, isApplying, setIsApplying] = createRoot(()=>{
+        const [s, setS] = createSignal(read());
+        const [a, setA] = createSignal(false);
+        return [
+            s,
+            setS,
+            a,
+            setA
+        ];
+    });
+    const atDefaults = (value)=>value.appPublicId === appPublicId && endpoints.every((e)=>true !== value.overrides[e.name] && value.urls[e.name] === e.fallback);
+    const write = (value)=>{
+        try {
+            if ("u" < typeof localStorage) return;
+            if (atDefaults(value)) localStorage.removeItem(storageKey);
+            else localStorage.setItem(storageKey, JSON.stringify(value));
+        } catch  {}
+    };
+    createRoot(()=>{
+        createEffect(()=>state(), (value)=>{
+            write(value);
+        });
+    });
+    let committed = state();
+    let inFlight = 0;
+    let queue = Promise.resolve();
+    const update = (change)=>{
+        committed = change(committed);
+        setState(committed);
+    };
+    const resolveFrom = (current)=>Object.fromEntries(endpoints.map((e)=>{
+            const override = true === current.overrides[e.name] ? current.urls[e.name] : void 0;
+            return [
+                e.name,
+                override && "" !== override ? override : e.fallback
+            ];
+        }));
+    let resolvedFor;
+    let resolvedValue = Object.freeze({});
+    const resolved = ()=>{
+        const current = state();
+        if (resolvedFor !== current) {
+            resolvedFor = current;
+            resolvedValue = Object.freeze(resolveFrom(current));
+        }
+        return resolvedValue;
+    };
+    return {
+        get state () {
+            return state();
+        },
+        get urls () {
+            return resolved();
+        },
+        validate (name, url) {
+            const endpoint = endpoints.find((e)=>e.name === name);
+            if (!endpoint) return `${name} is not a configured endpoint`;
+            if ("" === url) return "an address is required";
+            return (endpoint.validate ?? isAbsoluteUrl)(url);
+        },
+        get fallbacks () {
+            return fallbacks;
+        },
+        get isApplying () {
+            return isApplying();
+        },
+        get isAtDefaults () {
+            state();
+            return atDefaults(committed);
+        },
+        state$: state,
+        isOverridden (name) {
+            return true === state().overrides[name];
+        },
+        setUrl (name, url) {
+            if ("" !== url) {
+                const endpoint = endpoints.find((e)=>e.name === name);
+                const problem = endpoint ? (endpoint.validate ?? isAbsoluteUrl)(url) : `${name} is not a configured endpoint`;
+                if (problem) return problem;
+            }
+            update((c)=>({
+                    ...c,
+                    urls: {
+                        ...c.urls,
+                        [name]: url
+                    }
+                }));
+        },
+        setOverride (name, on) {
+            update((c)=>({
+                    ...c,
+                    overrides: {
+                        ...c.overrides,
+                        [name]: on
+                    }
+                }));
+        },
+        setUseCustom (on) {
+            update((c)=>({
+                    ...c,
+                    overrides: Object.fromEntries(endpoints.map((e)=>[
+                            e.name,
+                            on
+                        ]))
+                }));
+        },
+        setAppPublicId (id) {
+            update((c)=>({
+                    ...c,
+                    appPublicId: id
+                }));
+        },
+        reset () {
+            committed = defaults();
+            setState(committed);
+        },
+        async apply () {
+            inFlight += 1;
+            setIsApplying(true);
+            const current = committed;
+            const reconnect = ()=>{
+                write(current);
+                return onApply?.({
+                    urls: resolveFrom(current),
+                    appPublicId: current.appPublicId,
+                    overrides: {
+                        ...current.overrides
+                    }
+                }) ?? void 0;
+            };
+            const run = 1 === inFlight ? (async ()=>reconnect())() : queue.then(reconnect).then(()=>void 0);
+            queue = run.catch(()=>void 0);
+            try {
+                await run;
+            } finally{
+                inFlight -= 1;
+                if (0 === inFlight) setIsApplying(false);
+            }
+        }
+    };
+};
+export { createConnectionSettings, isAbsoluteUrl, isIpv6Literal };

package/dist/hooks/connection/index.d.ts

@@ -0,0 +1,2 @@
+export type { ConnectionEndpoint, ConnectionSettingsApplied, ConnectionSettingsOptions, ConnectionSettingsState, ConnectionSettingsStore, } from "./createConnectionSettings";
+export { createConnectionSettings, isAbsoluteUrl } from "./createConnectionSettings";

package/dist/hooks/connection/index.js

@@ -0,0 +1 @@
+export { createConnectionSettings, isAbsoluteUrl } from "./createConnectionSettings.js";

package/dist/index.d.ts

@@ -20,7 +20,7 @@ export type { ButtonProps } from "./components/button";
 export { default as Button } from "./components/button";
 export { PanelToggle, type PanelToggleProps, type PanelToggleSide, } from "./components/panel-toggle";
 export { type CalendarDayHoverHandler, type CalendarDaySelectHandler, type CalendarProps, type CalendarSelectionMode, type CalendarWeekdayFormat, default as Calendar, } from "./components/calendar";
-export type { CardElevation, CardMaterial, CardProps, CardSectionProps, } from "./components/card";
+export type { CardElevation, CardMaterial, CardState, CardProps, CardSectionProps, } from "./components/card";
 export { Card as CardRoot, CardBody, CardFooter, CardHeader, default as Card, } from "./components/card";
 export { default as ChatBubble } from "./components/chatbubble";
 export { default as Checkbox } from "./components/checkbox";
@@ -123,6 +123,10 @@ export type { AnyFormApi, CreateFormOptions, FormApi, UseFieldResult, } from "./
 export { createForm, FormContext, getFirstFieldError, useField, useFormContext, } from "./hooks/form";
 export type { CreateMutationOptions, CreateQueryOptions, MutationResult, QueryResult, } from "./hooks/data";
 export { createMutation, createQuery, invalidateQueries, } from "./hooks/data";
+export type { ConnectionEndpoint, ConnectionSettingsApplied, ConnectionSettingsOptions, ConnectionSettingsState, ConnectionSettingsStore, } from "./hooks/connection";
+export { createConnectionSettings, isAbsoluteUrl } from "./hooks/connection";
+export type { ConnectionSettingsEndpointLabel, ConnectionSettingsLabels, ConnectionSettingsProps, } from "./components/connection-settings";
+export { ConnectionSettings } from "./components/connection-settings";
 export { useDesktop } from "./hooks/layout";
 export type { UseAnchoredOverlayPositionOptions } from "./hooks/table";
 export { useAnchoredOverlayPosition } from "./hooks/table";

package/dist/index.js

@@ -73,6 +73,8 @@ export { TooltipArrow, TooltipContent, TooltipTrigger, default as Tooltip } from
 export { FLAVORS, SIZES, SPACES, STATES, VARIANTS, isInvalid, resolveState } from "./components/vocabulary.js";
 export { FormContext, createForm, getFirstFieldError, useField, useFormContext } from "./hooks/form/index.js";
 export { createMutation, createQuery, invalidateQueries } from "./hooks/data/index.js";
+export { createConnectionSettings, isAbsoluteUrl } from "./hooks/connection/index.js";
+export { ConnectionSettings } from "./components/connection-settings/index.js";
 export { useDesktop } from "./hooks/layout/index.js";
 export { useAnchoredOverlayPosition } from "./hooks/table/index.js";
 export { evaluatePasswordRules, matchPasswordConfirmation } from "./passwordRules.js";

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "components": {
     "Accordion": {
       "kind": "embedded"

package/dist/lib/focus.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Keyboard focus, for the overlays that have to contain it.
+ *
+ * Here rather than in a component's own module because two components had
+ * their own copy of the same twenty lines -- Drawer's in `Drawer.a11y.ts` and
+ * Dialog's written out inline -- and the overlay manager now needs it too. A
+ * `lib` importing from a `components` directory to reach one of those copies
+ * would be the layering inverted to avoid moving a helper.
+ */
+/** Everything inside `container` a person can Tab to, in document order. */
+export declare const getFocusable: (container: HTMLElement) => HTMLElement[];
+/** Move focus to the first thing inside `container` that will take it. */
+export declare const focusFirst: (container: HTMLElement) => void;
+/**
+ * Keep Tab inside a scope, wrapping at both ends.
+ *
+ * The scope is a list, not one element, because a modal's content is not
+ * always one subtree: a Popover opened from inside a Dialog portals its
+ * content elsewhere in the document, and it is still part of what the person
+ * is looking at. Trapping in the Dialog's element alone would make the popover
+ * unreachable by keyboard; treating the popover as the scope would let Tab
+ * leave the modal behind it. Both belong.
+ *
+ * Order matters: the containers are given innermost-last, and the focusables
+ * are concatenated in that order, so tabbing off the end of the newest overlay
+ * wraps to the start of the modal that owns the scope.
+ *
+ * A scope with nothing focusable in it takes focus itself, so Tab cannot
+ * escape a modal that is still loading its content.
+ */
+export declare const trapFocus: (event: KeyboardEvent, scope: HTMLElement | HTMLElement[]) => void;

package/dist/lib/focus.js

@@ -0,0 +1,39 @@
+const FOCUSABLE_SELECTOR = "a[href],area[href],button:not([disabled]),input:not([disabled]):not([type='hidden']),select:not([disabled]),textarea:not([disabled]),[contenteditable='true'],[tabindex]:not([tabindex='-1'])";
+const getFocusable = (container)=>Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el)=>!el.hidden && el.tabIndex >= 0 && "true" !== el.getAttribute("aria-hidden"));
+const focusFirst = (container)=>{
+    const autofocus = container.querySelector("[autofocus]");
+    if (autofocus) return void autofocus.focus();
+    const nodes = getFocusable(container);
+    if (nodes.length > 0) return void nodes[0].focus();
+    container.focus();
+};
+const trapFocus = (event, scope)=>{
+    const containers = Array.isArray(scope) ? scope : [
+        scope
+    ];
+    const container = containers[0];
+    if (!container) return;
+    const nodes = containers.flatMap((element)=>getFocusable(element));
+    if (0 === nodes.length) {
+        event.preventDefault();
+        container.focus();
+        return;
+    }
+    const first = nodes[0];
+    const last = nodes[nodes.length - 1];
+    const active = document.activeElement;
+    if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+        return;
+    }
+    if (event.shiftKey && (active === first || containers.some((element)=>active === element))) {
+        event.preventDefault();
+        last.focus();
+    }
+    if (active && !containers.some((element)=>element.contains(active))) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+    }
+};
+export { focusFirst, getFocusable, trapFocus };

package/dist/lib/overlay.d.ts

@@ -0,0 +1,94 @@
+/**
+ * One owner for the things overlapping overlays have to agree about.
+ *
+ * Dialog, Drawer and Popover each had their own copy of this, which is fine
+ * until two of them are open at once, and then it is not:
+ *
+ * - **Escape closed every layer.** Each component bound its own `keydown` on
+ *   `document`, and every listener that saw the key acted on it. Opening a
+ *   Popover from inside a Dialog and pressing Escape dismissed both, because
+ *   nothing established which overlay owned the event.
+ *
+ * - **The body could be left unscrollable for good.** Dialog and Drawer had
+ *   *separate* module-scope lock counters, each saving `document.body.style
+ *   .overflow` the first time it locked. Dialog opens and saves `""`. Drawer
+ *   opens and saves `"hidden"` -- Dialog's value, not the page's. Dialog closes
+ *   and restores `""`. Drawer closes and restores `"hidden"`. The page is now
+ *   stuck, and nothing on screen says why.
+ *
+ * Components supply policy -- whether they are dismissable, what closing means
+ * -- and this owns the mechanism.
+ */
+type DismissReason = "escape";
+interface OverlayEntry {
+    dismiss: (reason: DismissReason) => void;
+    /** Asked at dismiss time, not at registration: `closeOnEscape` can change. */
+    dismissable: () => boolean;
+    /**
+     * This overlay's own content, asked at key time because it is portalled and
+     * mounts after registration.
+     *
+     * Declared by modal and non-modal overlays alike. A Popover is not modal and
+     * still has to be part of the focus scope of whatever it was opened from, or
+     * Tab cannot reach it.
+     */
+    element?: () => HTMLElement | undefined;
+    /**
+     * Whether this overlay contains focus while it is open.
+     *
+     * True for Dialog and Drawer, false for Popover. It decides who *owns* the
+     * scope; `element` decides what is *in* it.
+     *
+     * Here rather than on each component for the same reason `dismiss` is.
+     * Dialog and Drawer each bound their own document-level Tab listener and
+     * each gated it on "am I visible", so with both open both traps ran and the
+     * one behind could pull focus out of the one in front. Which overlay owns
+     * the keyboard is a question about all of them.
+     */
+    modal?: boolean;
+}
+/**
+ * The elements Tab may move within, given what is open.
+ *
+ * The innermost *modal* owns the scope, and everything opened above it is
+ * inside that scope. Empty when nothing open contains focus, which is Tab
+ * belonging to the page.
+ *
+ * Asking only the top entry was wrong in the one arrangement this manager
+ * exists for: a Popover opened from inside a Dialog is the top entry and is
+ * not modal, so Tab did nothing at all and focus walked out to the page behind
+ * a dialog that was still open -- worse than before the manager, where the
+ * Dialog's own listener at least still ran. Trapping in the modal's element
+ * alone is the opposite failure: the popover's portalled content sits outside
+ * that element and Tab could never reach it.
+ *
+ * Exported for tests. This repository has no DOM in its unit tests -- the
+ * harness is the DOM-level instrument -- and the bugs here are arrangements
+ * rather than components, which is exactly what a one-component-per-page sweep
+ * cannot set up. Keeping the decision pure is what makes it assertable at all.
+ */
+export declare const focusScope: (entries: readonly OverlayEntry[]) => HTMLElement[];
+/**
+ * Claim the keyboard while an overlay is open.
+ *
+ * Call this **when the overlay becomes visible**, not when the component
+ * mounts, and call the returned function when it closes. The stack is the
+ * order overlays opened in, and it can only be that if registration is.
+ *
+ * The most recently registered overlay owns Escape, and — when it declares
+ * `trapFocusIn` — Tab.
+ */
+export declare const registerOverlay: (entry: OverlayEntry) => (() => void);
+/** How many overlays currently own dismissal. Exposed for tests. */
+export declare const overlayDepth: () => number;
+/**
+ * Hold the body still while an overlay is open.
+ *
+ * One counter for the whole library. The saved values are captured on the
+ * first lock and restored on the last release, so overlapping overlays cannot
+ * save each other's `hidden` and restore it afterwards.
+ */
+export declare const lockBodyScroll: () => (() => void);
+/** Outstanding scroll locks. Exposed for tests. */
+export declare const bodyScrollLockDepth: () => number;
+export {};

package/dist/lib/overlay.js

@@ -0,0 +1,72 @@
+import { trapFocus } from "./focus.js";
+const stack = [];
+let keydownBound = false;
+const overlay_top = ()=>stack[stack.length - 1];
+const focusScope = (entries)=>{
+    for(let i = entries.length - 1; i >= 0; i -= 1)if (entries[i]?.modal) return entries.slice(i).map((entry)=>entry.element?.()).filter((element)=>Boolean(element));
+    return [];
+};
+const handleKeyDown = (event)=>{
+    if (event.defaultPrevented) return;
+    const entry = overlay_top();
+    if (!entry) return;
+    if ("Tab" === event.key) {
+        const scope = focusScope(stack);
+        if (scope.length > 0) trapFocus(event, scope);
+        return;
+    }
+    if ("Escape" !== event.key) return;
+    if (!entry.dismissable()) return;
+    event.preventDefault();
+    entry.dismiss("escape");
+};
+const bindKeyDown = ()=>{
+    if (keydownBound || "u" < typeof document) return;
+    document.addEventListener("keydown", handleKeyDown);
+    keydownBound = true;
+};
+const unbindKeyDown = ()=>{
+    if (!keydownBound || stack.length > 0 || "u" < typeof document) return;
+    document.removeEventListener("keydown", handleKeyDown);
+    keydownBound = false;
+};
+const registerOverlay = (entry)=>{
+    stack.push(entry);
+    bindKeyDown();
+    let released = false;
+    return ()=>{
+        if (released) return;
+        released = true;
+        const index = stack.lastIndexOf(entry);
+        if (-1 !== index) stack.splice(index, 1);
+        unbindKeyDown();
+    };
+};
+const overlayDepth = ()=>stack.length;
+let lockCount = 0;
+let restoreOverflow = "";
+let restorePaddingRight = "";
+const lockBodyScroll = ()=>{
+    if ("u" < typeof document) return ()=>{};
+    if (0 === lockCount) {
+        restoreOverflow = document.body.style.overflow;
+        restorePaddingRight = document.body.style.paddingRight;
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        if (scrollbarWidth > 0) document.body.style.paddingRight = `${scrollbarWidth}px`;
+        document.body.style.overflow = "hidden";
+    }
+    lockCount += 1;
+    let released = false;
+    return ()=>{
+        if (released) return;
+        released = true;
+        if (lockCount <= 0) return;
+        lockCount -= 1;
+        if (0 === lockCount) {
+            document.body.style.overflow = restoreOverflow;
+            document.body.style.paddingRight = restorePaddingRight;
+        }
+    };
+};
+const bodyScrollLockDepth = ()=>lockCount;
+export { bodyScrollLockDepth, focusScope, lockBodyScroll, overlayDepth, registerOverlay };