@pzerelles/headlessui-svelte 2.1.2-next.2 → 2.1.2-next.21

package/dist/popover/PopoverBackdrop.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" module>import { RenderFeatures } from "../utils/render.js";
+let DEFAULT_BACKDROP_TAG = "div";
+const BackdropRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { useId } from "../hooks/use-id.js";
+import { PopoverStates, usePopoverContext } from "./context.svelte.js";
+import { State, useOpenClosed } from "../internal/open-closed.js";
+import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js";
+const internalId = useId();
+let {
+  ref = $bindable(),
+  id = `headlessui-popover-backdrop-${internalId}`,
+  transition = false,
+  ...theirProps
+} = $props();
+const context = usePopoverContext("PopoverBackdrop");
+const { popoverState } = $derived(context);
+const usesOpenClosedState = useOpenClosed();
+const _transition = useTransition({
+  get enabled() {
+    return transition;
+  },
+  get element() {
+    return ref;
+  },
+  get show() {
+    return usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Open) === State.Open : popoverState === PopoverStates.Open;
+  }
+});
+const { visible, data: transitionData } = $derived(_transition);
+const handleClick = (event) => {
+  context.closePopover();
+};
+const slot = $derived({
+  open: popoverState === PopoverStates.Open
+});
+const ourProps = $derived({
+  id,
+  "aria-hidden": true,
+  onclick: handleClick,
+  ...transitionDataAttributes(transitionData)
+});
+</script>
+
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_BACKDROP_TAG}
+  features={BackdropRenderFeatures}
+  name="PopoverBackdrop"
+  {visible}
+  bind:ref
+/>

package/dist/popover/PopoverBackdrop.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import { type PropsForFeatures } from "../utils/render.js";
+declare let DEFAULT_BACKDROP_TAG: "div";
+type BackdropRenderPropArg = {
+    open: boolean;
+};
+type BackdropPropsWeControl = "aria-hidden";
+declare const BackdropRenderFeatures: number;
+export type PopoverBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<TTag, BackdropRenderPropArg, BackdropPropsWeControl, {
+    transition?: boolean;
+} & PropsForFeatures<typeof BackdropRenderFeatures>>;
+export type PopoverOverlayProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = PopoverBackdropProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "unmount" | "static" | "aria-hidden" | "transition"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[BackdropRenderPropArg, Record<string, any>]> | undefined;
+        ref?: HTMLElement;
+    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends 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?: PropsOf<TTag>["class"] | ((bag: BackdropRenderPropArg) => string) | undefined;
+    } : {}) & {
+        transition?: boolean;
+    } & {
+        static?: boolean | undefined;
+        unmount?: boolean | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_BACKDROP_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_BACKDROP_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 PopoverBackdrop: $$IsomorphicComponent;
+type PopoverBackdrop<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = InstanceType<typeof PopoverBackdrop<TTag>>;
+export default PopoverBackdrop;

package/dist/popover/PopoverButton.svelte

@@ -0,0 +1,246 @@
+<script lang="ts" module>const DEFAULT_BUTTON_TAG = "button";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">import { useId } from "../hooks/use-id.js";
+import {
+  PopoverStates,
+  usePopoverAPIContext,
+  usePopoverContext,
+  usePopoverGroupContext,
+  usePopoverPanelContext
+} from "./context.svelte.js";
+import { useFloatingReference } from "../internal/floating.svelte.js";
+import { untrack } from "svelte";
+import { getOwnerDocument } from "../utils/owner.js";
+import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
+import { useHover } from "../hooks/use-hover.svelte.js";
+import { useActivePress } from "../hooks/use-active-press.svelte.js";
+import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
+import { mergeProps } from "../utils/render.js";
+import { useTabDirection, Direction as TabDirection } from "../hooks/use-tab-direction.svelte.js";
+import { match } from "../utils/match.js";
+import { Focus, focusIn, FocusResult, getFocusableElements } from "../utils/focus-management.js";
+import { microTask } from "../utils/microTask.js";
+import Hidden, { HiddenFeatures } from "../internal/Hidden.svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const internalId = useId();
+let {
+  ref = $bindable(),
+  id = `headlessui-popover-button-${internalId}`,
+  disabled = false,
+  autofocus = false,
+  ...theirProps
+} = $props();
+const context = usePopoverContext("PopoverButton");
+const api = usePopoverAPIContext("PopoverButton");
+const { isPortalled } = $derived(api);
+const sentinelId = `headlessui-focus-sentinel-${useId()}`;
+const groupContext = usePopoverGroupContext();
+const closeOthers = $derived(groupContext?.closeOthers);
+const panelContext = usePopoverPanelContext();
+const isWithinPanel = panelContext !== void 0;
+$effect(() => {
+  if (isWithinPanel) return;
+  id;
+  return untrack(() => {
+    context.setButtonId(id);
+    return () => {
+      context.setButtonId(void 0);
+    };
+  });
+});
+const uniqueIdentifier = Symbol();
+const floatingReference = useFloatingReference();
+const { setReference } = $derived(floatingReference);
+$effect(() => {
+  setReference(ref);
+});
+$effect(() => {
+  if (isWithinPanel) return;
+  ref;
+  untrack(() => {
+    if (ref) {
+      context.buttons.push(uniqueIdentifier);
+    } else {
+      let idx = context.buttons.indexOf(uniqueIdentifier);
+      if (idx !== -1) context.buttons.splice(idx, 1);
+    }
+    if (context.buttons.length > 1) {
+      console.warn("You are already using a <PopoverButton /> but only 1 <PopoverButton /> is supported.");
+    }
+    if (ref) context.setButton(ref);
+  });
+});
+const ownerDocument = $derived(getOwnerDocument(ref));
+const handleKeyDown = (event) => {
+  if (isWithinPanel) {
+    if (context.popoverState === PopoverStates.Closed) return;
+    switch (event.key) {
+      case "Space":
+      case "Enter":
+        event.preventDefault();
+        event.target.click?.();
+        context.closePopover();
+        context.button?.focus();
+        break;
+    }
+  } else {
+    switch (event.key) {
+      case "Space":
+      case "Enter":
+        event.preventDefault();
+        event.stopPropagation();
+        if (context.popoverState === PopoverStates.Closed) closeOthers?.(context.buttonId);
+        context.togglePopover();
+        break;
+      case "Escape":
+        if (context.popoverState !== PopoverStates.Open) return closeOthers?.(context.buttonId);
+        if (!ref) return;
+        if (ownerDocument?.activeElement && !ref.contains(ownerDocument.activeElement)) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        context.closePopover();
+        break;
+    }
+  }
+};
+const handleKeyUp = (event) => {
+  if (isWithinPanel) return;
+  if (event.key === "Space") {
+    event.preventDefault();
+  }
+};
+const handleClick = (event) => {
+  if (disabled) return;
+  if (isWithinPanel) {
+    context.closePopover();
+    context.button?.focus();
+  } else {
+    event.preventDefault();
+    event.stopPropagation();
+    if (context.popoverState === PopoverStates.Closed) closeOthers?.(context.buttonId);
+    context.togglePopover();
+    context.button?.focus();
+  }
+};
+const handleMouseDown = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+const { isFocusVisible: focus, focusProps } = $derived(
+  useFocusRing({
+    get autofocus() {
+      return autofocus;
+    }
+  })
+);
+const { isHovered: hover, hoverProps } = $derived(
+  useHover({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const visible = $derived(context.popoverState === PopoverStates.Open);
+const slot = $derived({
+  open: visible,
+  active: active || visible,
+  disabled,
+  hover,
+  focus,
+  autofocus
+});
+const type = useResolveButtonType({
+  get props() {
+    return { type: theirProps.type, as: theirProps.as };
+  },
+  get ref() {
+    return { current: context.button };
+  }
+});
+const ourProps = $derived(
+  isWithinPanel ? mergeProps(
+    {
+      type,
+      onkeydown: handleKeyDown,
+      onclick: handleClick,
+      disabled: disabled || void 0,
+      autofocus
+    },
+    focusProps,
+    hoverProps,
+    pressProps
+  ) : mergeProps(
+    {
+      id: context.buttonId,
+      type,
+      "aria-expanded": context.popoverState === PopoverStates.Open,
+      "aria-controls": context.panel ? context.panelId : void 0,
+      disabled: disabled || void 0,
+      autofocus,
+      onkeydown: handleKeyDown,
+      onkeyup: handleKeyUp,
+      onclick: handleClick,
+      onmousedown: handleMouseDown
+    },
+    focusProps,
+    hoverProps,
+    pressProps
+  )
+);
+const direction = useTabDirection();
+const handleFocus = () => {
+  const el = context.panel;
+  if (!el) return;
+  function run() {
+    let result = match(direction.current, {
+      [TabDirection.Forwards]: () => focusIn(el, Focus.First),
+      [TabDirection.Backwards]: () => focusIn(el, Focus.Last)
+    });
+    if (result === FocusResult.Error) {
+      focusIn(
+        getFocusableElements().filter((el2) => el2.dataset.headlessuiFocusGuard !== "true"),
+        match(direction.current, {
+          [TabDirection.Forwards]: Focus.Next,
+          [TabDirection.Backwards]: Focus.Previous
+        }),
+        { relativeTo: context.button }
+      );
+    }
+  }
+  if (process.env.NODE_ENV === "test") {
+    microTask(run);
+  } else {
+    run();
+  }
+};
+</script>
+
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_BUTTON_TAG}
+  name="PopoverButton"
+  bind:ref
+/>
+{#if visible && !isWithinPanel && isPortalled}
+  <Hidden
+    id={sentinelId}
+    bind:ref={context.afterButtonSentinel as HTMLElement}
+    features={HiddenFeatures.Focusable}
+    data-headlessui-focus-guard
+    as="button"
+    type="button"
+    onfocus={handleFocus}
+  />
+{/if}

package/dist/popover/PopoverButton.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
+declare const DEFAULT_BUTTON_TAG: "button";
+export type PopoverButtonSlot = {
+    open: boolean;
+    active: boolean;
+    hover: boolean;
+    focus: boolean;
+    disabled: boolean;
+    autofocus: boolean;
+};
+export type PopoverButtonPropsWeControl = "aria-controls" | "aria-expanded";
+export type PopoverButtonComponentProps = {
+    disabled?: boolean;
+    autoFocus?: boolean;
+};
+export type PopoverButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, PopoverButtonSlot, PopoverButtonPropsWeControl, PopoverButtonComponentProps>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | PopoverButtonPropsWeControl | keyof PopoverButtonComponentProps> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[PopoverButtonSlot, Record<string, any>]> | undefined;
+        ref?: HTMLElement;
+    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends 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?: PropsOf<TTag>["class"] | ((bag: PopoverButtonSlot) => string) | undefined;
+    } : {}) & PopoverButtonComponentProps;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_BUTTON_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_BUTTON_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 PopoverButton: $$IsomorphicComponent;
+type PopoverButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof PopoverButton<TTag>>;
+export default PopoverButton;

package/dist/popover/PopoverGroup.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>import { setContext } from "svelte";
+const DEFAULT_GROUP_TAG = "div";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">import MainTreeProvider from "../internal/MainTreeProvider.svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { getOwnerDocument } from "../utils/owner.js";
+let { ref = $bindable(), ...theirProps } = $props();
+const popovers = $state([]);
+const unregisterPopover = (registerBag) => {
+  const idx = popovers.indexOf(registerBag);
+  if (idx !== -1) popovers.splice(idx, 1);
+};
+const registerPopover = (registerBag) => {
+  popovers.push(registerBag);
+  return () => unregisterPopover(registerBag);
+};
+const isFocusWithinPopoverGroup = () => {
+  const ownerDocument = getOwnerDocument(ref);
+  if (!ownerDocument) return false;
+  let element = ownerDocument.activeElement;
+  if (ref?.contains(element)) return true;
+  return popovers.some((bag) => {
+    return ownerDocument.getElementById(bag.buttonId)?.contains(element) || ownerDocument.getElementById(bag.panelId)?.contains(element);
+  });
+};
+const closeOthers = (buttonId) => {
+  for (const popover of popovers) {
+    if (popover.buttonId !== buttonId) popover.close();
+  }
+};
+setContext("PopoverGroupContext", {
+  registerPopover,
+  unregisterPopover,
+  isFocusWithinPopoverGroup,
+  closeOthers
+});
+const slot = {};
+</script>
+
+<MainTreeProvider>
+  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_GROUP_TAG} name="PopoverGroup" bind:ref />
+</MainTreeProvider>

package/dist/popover/PopoverGroup.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { ElementType, Props } from "../utils/types.js";
+declare const DEFAULT_GROUP_TAG: "div";
+type GroupRenderPropArg = {};
+type GroupPropsWeControl = never;
+export type PopoverGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[GroupRenderPropArg, Record<string, any>]> | 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: GroupRenderPropArg) => string) | undefined;
+    } : {});
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_GROUP_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_GROUP_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 PopoverGroup: $$IsomorphicComponent;
+type PopoverGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = InstanceType<typeof PopoverGroup<TTag>>;
+export default PopoverGroup;