@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.3

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/use-controllable.svelte.d.ts

@@ -2,5 +2,5 @@ export declare function useControllable<T>(input: {
     controlledValue: T | undefined;
 }, onchange?: (value: T) => void, defaultValue?: T): {
     readonly value: NonNullable<T>;
-    onchange: (value: T) => void | undefined;
+    onchange: (value: T) => void;
 };

package/dist/hooks/use-controllable.svelte.js

@@ -22,12 +22,12 @@ export function useControllable(input, onchange, defaultValue) {
             return value;
         },
         onchange: (value) => {
-            if (isControlled) {
-                return onchange?.(value);
+            if (isControlled && onchange) {
+                onchange?.(value);
             }
             else {
                 internalValue = value;
-                return onchange?.(value);
+                input.controlledValue = value;
             }
         },
     };

package/dist/hooks/use-escape.svelte.d.ts

@@ -0,0 +1,5 @@
+export declare function useEscape(options: {
+    enabled: boolean;
+    view: typeof document.defaultView | null;
+    cb: (event: KeyboardEvent) => void;
+}): void;

package/dist/hooks/use-escape.svelte.js

@@ -0,0 +1,26 @@
+import { useEventListener } from "./use-event-listener.svelte.js";
+import { useIsTopLayer } from "./use-is-top-layer.svelte.js";
+export function useEscape(options) {
+    const { enabled, view = typeof document !== "undefined" ? document.defaultView : null, cb } = $derived(options);
+    let isTopLayer = useIsTopLayer({
+        get enabled() {
+            return enabled;
+        },
+        scope: "escape",
+    });
+    useEventListener({
+        get element() {
+            return view;
+        },
+        type: "keydown",
+        listener: (event) => {
+            if (!isTopLayer.value)
+                return;
+            if (event.defaultPrevented)
+                return;
+            if (event.key !== "Escape")
+                return;
+            cb(event);
+        },
+    });
+}

package/dist/hooks/use-event-listener.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare function useEventListener<TType extends keyof WindowEventMap>(params: {
+    element: HTMLElement | Document | Window | EventTarget | null | undefined;
+    type: TType;
+    listener: (event: WindowEventMap[TType]) => any;
+    options?: boolean | AddEventListenerOptions;
+}): void;

package/dist/hooks/use-event-listener.svelte.js

@@ -0,0 +1,12 @@
+export function useEventListener(params) {
+    let { element = window, type, listener, options } = $derived(params);
+    $effect(() => {
+        if (!element)
+            return;
+        function handler(event) {
+            listener(event);
+        }
+        element.addEventListener(type, handler, options);
+        return () => element.removeEventListener(type, handler, options);
+    });
+}

package/dist/hooks/use-inert-others.svelte.d.ts

@@ -26,7 +26,7 @@
 export declare function useInertOthers(options: {
     enabled: boolean;
     elements?: {
-        allowed?: () => (HTMLElement | null)[];
-        disallowed?: () => (HTMLElement | null)[];
+        allowed?: (HTMLElement | null)[];
+        disallowed?: (HTMLElement | null)[];
     };
 }): void;

package/dist/hooks/use-inert-others.svelte.js

@@ -81,13 +81,13 @@ export function useInertOthers(options) {
             return;
         let d = disposables();
         // Mark all disallowed elements as inert
-        for (let element of disallowed?.() ?? []) {
+        for (let element of disallowed ?? []) {
             if (!element)
                 continue;
             d.add(markInert(element));
         }
         // Mark all siblings of allowed elements (and parents) as inert
-        let allowedElements = allowed?.() ?? [];
+        let allowedElements = allowed ?? [];
         for (let element of allowedElements) {
             if (!element)
                 continue;
@@ -100,7 +100,7 @@ export function useInertOthers(options) {
                 for (let node of parent.children) {
                     // If the node contains any of the elements we should not mark it as inert
                     // because it would make the elements unreachable.
-                    if (allowedElements.some((el) => node.contains(el)))
+                    if (node.tagName.toLowerCase() === "svelte:fragment" || allowedElements.some((el) => node.contains(el)))
                         continue;
                     // Mark the node as inert
                     d.add(markInert(node));

package/dist/hooks/use-is-mounted.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare function useIsMounted(): {
+    readonly current: boolean;
+};

package/dist/hooks/use-is-mounted.svelte.js

@@ -0,0 +1,14 @@
+export function useIsMounted() {
+    let mounted = $state(false);
+    $effect(() => {
+        mounted = true;
+        return () => {
+            mounted = false;
+        };
+    });
+    return {
+        get current() {
+            return mounted;
+        },
+    };
+}

package/dist/hooks/use-is-touch-device.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare function useIsTouchDevice(): {
+    readonly value: boolean;
+};

package/dist/hooks/use-is-touch-device.svelte.js

@@ -0,0 +1,20 @@
+export function useIsTouchDevice() {
+    const mq = typeof window !== "undefined" && typeof window.matchMedia === "function"
+        ? window.matchMedia("(pointer: coarse)")
+        : null;
+    let isTouchDevice = $state(mq?.matches ?? false);
+    $effect(() => {
+        if (!mq)
+            return;
+        function handle(event) {
+            isTouchDevice = event.matches;
+        }
+        mq.addEventListener("change", handle);
+        return () => mq.removeEventListener("change", handle);
+    });
+    return {
+        get value() {
+            return isTouchDevice;
+        },
+    };
+}

package/dist/hooks/use-root-containers.svelte.d.ts

@@ -0,0 +1,9 @@
+export { default as MainTreeProvider, useMainTreeNode } from "../internal/MainTreeProvider.svelte";
+export declare function useRootContainers(options?: {
+    defaultContainers?: (HTMLElement | null)[];
+    portals?: HTMLElement[];
+    mainTreeNode?: HTMLElement | null;
+}): {
+    readonly resolvedContainers: HTMLElement[];
+    contains: (element: HTMLElement) => boolean;
+};

package/dist/hooks/use-root-containers.svelte.js

@@ -0,0 +1,50 @@
+import { getOwnerDocument } from "../utils/owner.js";
+export { default as MainTreeProvider, useMainTreeNode } from "../internal/MainTreeProvider.svelte";
+export function useRootContainers(options = {}) {
+    const { defaultContainers = [], portals, 
+    // Reference to a node in the "main" tree, not in the portalled Dialog tree.
+    mainTreeNode, } = $derived(options);
+    const ownerDocument = $derived(getOwnerDocument(mainTreeNode));
+    const resolvedContainers = $derived.by(() => {
+        let containers = [];
+        // Resolve default containers
+        for (let container of defaultContainers) {
+            if (container === null)
+                continue;
+            containers.push(container);
+        }
+        // Resolve portal containers
+        if (portals) {
+            for (let portal of portals) {
+                containers.push(portal);
+            }
+        }
+        // Resolve third party (root) containers
+        for (let container of ownerDocument?.querySelectorAll("html > *, body > *") ?? []) {
+            if (container === document.body)
+                continue; // Skip `<body>`
+            if (container === document.head)
+                continue; // Skip `<head>`
+            if (!(container instanceof HTMLElement))
+                continue; // Skip non-HTMLElements
+            if (container.id === "headlessui-portal-root")
+                continue; // Skip the Headless UI portal root
+            if (mainTreeNode) {
+                if (container.contains(mainTreeNode))
+                    continue; // Skip if it is the main app
+                if (container.contains(mainTreeNode?.getRootNode()?.host))
+                    continue; // Skip if it is the main app (and the component is inside a shadow root)
+            }
+            if (containers.some((defaultContainer) => container.contains(defaultContainer)))
+                continue; // Skip if the current container is part of a container we've already seen (e.g.: default container / portal)
+            containers.push(container);
+        }
+        return containers;
+    });
+    return {
+        get resolvedContainers() {
+            return resolvedContainers;
+        },
+        contains: (element) => resolvedContainers.some((container) => container.contains(element)),
+    };
+}

package/dist/hooks/use-tab-direction.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare enum Direction {
+    Forwards = 0,
+    Backwards = 1
+}
+export declare function useTabDirection(): {
+    readonly current: Direction;
+};

package/dist/hooks/use-tab-direction.svelte.js

@@ -0,0 +1,25 @@
+import { useWindowEvent } from "./use-window-event.svelte.js";
+export var Direction;
+(function (Direction) {
+    Direction[Direction["Forwards"] = 0] = "Forwards";
+    Direction[Direction["Backwards"] = 1] = "Backwards";
+})(Direction || (Direction = {}));
+export function useTabDirection() {
+    let direction = $state(Direction.Forwards);
+    let enabled = true;
+    useWindowEvent({
+        enabled,
+        type: "keydown",
+        listener: (event) => {
+            if (event.key === "Tab") {
+                direction = event.shiftKey ? Direction.Backwards : Direction.Forwards;
+            }
+        },
+        options: true,
+    });
+    return {
+        get current() {
+            return direction;
+        },
+    };
+}