@pzerelles/headlessui-svelte 2.1.2-next.31 → 2.1.2-next.33

package/dist/popover/PopoverGroup.svelte

@@ -1,43 +1,71 @@
-<script lang="ts" module>import { setContext } from "svelte";
-const DEFAULT_GROUP_TAG = "div";
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+  import { setContext } from "svelte"
+
+  const DEFAULT_GROUP_TAG = "div" as const
+  type GroupRenderPropArg = {}
+
+  export type PopoverGroupProps = Props<
+    typeof DEFAULT_GROUP_TAG,
+    GroupRenderPropArg,
+    {
+      element?: HTMLElement
+    }
+  >
 </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">
+  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 { element = $bindable(), ...theirProps }: PopoverGroupProps = $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(element)
+    if (!ownerDocument) return false
+    const el = ownerDocument.activeElement
+
+    if (element?.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(el) ||
+        ownerDocument!.getElementById(bag.panelId!)?.contains(el)
+      )
+    })
+  }
+
+  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>
-  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_GROUP_TAG} name="PopoverGroup" bind:ref />
+  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_GROUP_TAG} name="PopoverGroup" bind:element />
 </MainTreeProvider>

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

@@ -1,31 +1,8 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { 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>, "slot" | "as" | "children" | "class" | "ref"> 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;
-        class?: string | ((bag: GroupRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    };
-    events(): {};
-    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']> & {}): 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 type PopoverGroupProps = Props<typeof DEFAULT_GROUP_TAG, GroupRenderPropArg, {
+    element?: HTMLElement;
+}>;
+declare const PopoverGroup: import("svelte").Component<PopoverGroupProps, {}, "element">;
 export default PopoverGroup;