@pzerelles/headlessui-svelte 2.1.2-next.22 → 2.1.2-next.24

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

@@ -17,11 +17,14 @@ export type PopoverButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_
 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;
+    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "class") | PopoverButtonPropsWeControl | keyof PopoverButtonComponentProps> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: PopoverButtonSlot;
+            props: 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;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: PopoverButtonSlot) => string) | null | undefined;
     } : {}) & PopoverButtonComponentProps;
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/popover/PopoverGroup.svelte

@@ -1,41 +1,68 @@
-<script lang="ts" module>import { setContext } from "svelte";
-const DEFAULT_GROUP_TAG = "div";
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+  import { setContext } from "svelte"
+
+  const DEFAULT_GROUP_TAG = "div" as const
+  type GroupRenderPropArg = {}
+  type GroupPropsWeControl = never
+
+  export type PopoverGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<
+    TTag,
+    GroupRenderPropArg,
+    GroupPropsWeControl
+  >
 </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();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">
+  import type { PopoverGroupContext, PopoverRegisterBag } from "./context.svelte"
+  import MainTreeProvider from "../internal/MainTreeProvider.svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { getOwnerDocument } from "../utils/owner.js"
+
+  let { ref = $bindable(), ...theirProps }: { as?: TTag } & PopoverGroupProps<TTag> = $props()
+
+  const popovers = $state<PopoverRegisterBag[]>([])
+
+  const unregisterPopover = (registerBag: PopoverRegisterBag) => {
+    const idx = popovers.indexOf(registerBag)
+    if (idx !== -1) popovers.splice(idx, 1)
+  }
+
+  const registerPopover = (registerBag: PopoverRegisterBag) => {
+    popovers.push(registerBag)
+    return () => unregisterPopover(registerBag)
   }
-};
-setContext("PopoverGroupContext", {
-  registerPopover,
-  unregisterPopover,
-  isFocusWithinPopoverGroup,
-  closeOthers
-});
-const slot = {};
+
+  const isFocusWithinPopoverGroup = () => {
+    const ownerDocument = getOwnerDocument(ref)
+    if (!ownerDocument) return false
+    let element = ownerDocument.activeElement
+
+    if (ref?.contains(element)) return true
+
+    // Check if the focus is in one of the button or panel elements. This is important in case you are rendering inside a Portal.
+    return popovers.some((bag) => {
+      return (
+        ownerDocument!.getElementById(bag.buttonId!)?.contains(element) ||
+        ownerDocument!.getElementById(bag.panelId!)?.contains(element)
+      )
+    })
+  }
+
+  const closeOthers = (buttonId: string) => {
+    for (const popover of popovers) {
+      if (popover.buttonId !== buttonId) popover.close()
+    }
+  }
+
+  setContext<PopoverGroupContext>("PopoverGroupContext", {
+    registerPopover,
+    unregisterPopover,
+    isFocusWithinPopoverGroup,
+    closeOthers,
+  })
+
+  const slot = {} satisfies GroupRenderPropArg
 </script>
 
 <MainTreeProvider>

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

@@ -6,11 +6,14 @@ export type PopoverGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TA
 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;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "as" | "children" | "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<[{
+            slot: GroupRenderPropArg;
+            props: 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;
+    } & (true extends (import("svelte/elements").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements").SvelteHTMLElements[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?: string | ((bag: GroupRenderPropArg) => string) | null | undefined;
     } : {});
     events(): {} & {
         [evt: string]: CustomEvent<any>;