npm - @pzerelles/headlessui-svelte - Versions diffs - 2.1.2-next.19 → 2.1.2-next.20 - Mend

@pzerelles/headlessui-svelte 2.1.2-next.19 → 2.1.2-next.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/hooks/use-event-listener.svelte.d.ts +1 -1
package/dist/hooks/use-event-listener.svelte.js +3 -1
package/dist/hooks/use-root-containers.svelte.d.ts +2 -2
package/dist/hooks/use-root-containers.svelte.js +5 -5
package/dist/hooks/use-tab-direction.svelte.js +1 -1
package/dist/index.d.ts +1 -0
package/dist/index.js +1 -0
package/dist/internal/floating-provider.svelte.js +14 -14
package/dist/internal/floating.svelte.js +1 -0
package/dist/popover/Popover.svelte +161 -0
package/dist/popover/Popover.svelte.d.ts +41 -0
package/dist/popover/PopoverBackdrop.svelte +56 -0
package/dist/popover/PopoverBackdrop.svelte.d.ts +45 -0
package/dist/popover/PopoverButton.svelte +246 -0
package/dist/popover/PopoverButton.svelte.d.ts +46 -0
package/dist/popover/PopoverGroup.svelte +43 -0
package/dist/popover/PopoverGroup.svelte.d.ts +33 -0
package/dist/popover/PopoverPanel.svelte +274 -0
package/dist/popover/PopoverPanel.svelte.d.ts +53 -0
package/dist/popover/context.svelte.d.ts +51 -0
package/dist/popover/context.svelte.js +108 -0
package/dist/popover/index.d.ts +5 -0
package/dist/popover/index.js +5 -0
package/package.json +15 -15

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

@@ -1,6 +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;
+    listener: (event: WindowEventMap[TType]) => unknown;
     options?: boolean | AddEventListenerOptions;
 }): void;

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

@@ -1,5 +1,7 @@
 export function useEventListener(params) {
-    let { element = window, type, listener, options } = $derived(params);
+    if (typeof window === "undefined")
+        return;
+    const { element = window, type, listener, options } = $derived(params);
     $effect(() => {
         if (!element)
             return;

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

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

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

@@ -6,21 +6,21 @@ export function useRootContainers(options = {}) {
     mainTreeNode, } = $derived(options);
     const ownerDocument = $derived(getOwnerDocument(mainTreeNode));
     const resolvedContainers = $derived.by(() => {
-        let containers = [];
+        const containers = [];
         // Resolve default containers
-        for (let container of defaultContainers) {
-            if (container === null)
+        for (const container of defaultContainers) {
+            if (!container)
                 continue;
             containers.push(container);
         }
         // Resolve portal containers
         if (portals) {
-            for (let portal of portals) {
+            for (const portal of portals) {
                 containers.push(portal);
             }
         }
         // Resolve third party (root) containers
-        for (let container of ownerDocument?.querySelectorAll("html > *, body > *") ?? []) {
+        for (const container of ownerDocument?.querySelectorAll("html > *, body > *") ?? []) {
             if (container === document.body)
                 continue; // Skip `<body>`
             if (container === document.head)

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

@@ -6,7 +6,7 @@ export var Direction;
 })(Direction || (Direction = {}));
 export function useTabDirection() {
     let direction = $state(Direction.Forwards);
-    let enabled = true;
+    const enabled = true;
     useWindowEvent({
         enabled,
         type: "keydown",

package/dist/index.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@ export * from "./label/index.js";
 export * from "./legend/index.js";
 export * from "./listbox/index.js";
 export * from "./menu/index.js";
+export * from "./popover/index.js";
 export * from "./select/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";

package/dist/index.js CHANGED Viewed

@@ -11,6 +11,7 @@ export * from "./label/index.js";
 export * from "./legend/index.js";
 export * from "./listbox/index.js";
 export * from "./menu/index.js";
+export * from "./popover/index.js";
 export * from "./select/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";

package/dist/internal/floating-provider.svelte.js CHANGED Viewed

@@ -4,11 +4,11 @@ import { autoUpdate, flip as flipMiddleware, inner as innerMiddleware, offset as
 export const useFloatingProvider = (options = { enabled: true }) => {
     const { enabled } = $derived(options);
     // TODO: Make this a config part of the `config`. Just need to decide on a name.
-    let MINIMUM_ITEMS_VISIBLE = 4;
+    const MINIMUM_ITEMS_VISIBLE = 4;
     let config = $state(null);
     let innerOffset = $state(0);
     const setInnerOffset = (offset) => (innerOffset = typeof offset === "function" ? offset(innerOffset) : offset);
-    let overflowRef = $state({ current: null });
+    const overflowRef = $state({ current: null });
     let floatingEl = $state(null);
     const setFloatingElement = (element) => (floatingEl = element);
     useFixScrollingPixel({
@@ -26,7 +26,7 @@ export const useFloatingProvider = (options = { enabled: true }) => {
         },
     });
     const { to: placement = "bottom", gap = 0, offset = 0, padding = 0, inner } = $derived(resolvedConfig);
-    let [to, align = "center"] = $derived(placement.split(" "));
+    const [to, align = "center"] = $derived(placement.split(" "));
     // Reset
     $effect(() => {
         if (!isEnabled)
@@ -65,24 +65,24 @@ export const useFloatingProvider = (options = { enabled: true }) => {
                 onFallbackChange(fallback) {
                     if (!fallback)
                         return;
-                    let parent = context.elements.floating;
+                    const parent = context.elements.floating;
                     if (!parent)
                         return;
-                    let scrollPaddingBottom = parseFloat(getComputedStyle(parent).scrollPaddingBottom) || 0;
+                    const scrollPaddingBottom = parseFloat(getComputedStyle(parent).scrollPaddingBottom) || 0;
                     // We want at least X visible items, but if there are less than X items in the list,
                     // we want to show as many as possible.
                     let missing = Math.min(MINIMUM_ITEMS_VISIBLE, parent.childElementCount);
                     let elementHeight = 0;
                     let elementAmountVisible = 0;
-                    for (let child of context.elements.floating?.childNodes ?? []) {
+                    for (const child of context.elements.floating?.childNodes ?? []) {
                         if (child instanceof HTMLElement) {
-                            let childTop = child.offsetTop;
+                            const childTop = child.offsetTop;
                             // It can be that the child is fully visible, but we also want to keep the scroll
                             // padding into account to ensure the UI looks good. Therefore we fake that the
                             // bottom of the child is actually `scrollPaddingBottom` amount of pixels lower.
-                            let childBottom = childTop + child.clientHeight + scrollPaddingBottom;
-                            let parentTop = parent.scrollTop;
-                            let parentBottom = parentTop + parent.clientHeight;
+                            const childBottom = childTop + child.clientHeight + scrollPaddingBottom;
+                            const parentTop = parent.scrollTop;
+                            const parentBottom = parentTop + parent.clientHeight;
                             // Figure out if the child is fully visible in the scroll parent.
                             if (childTop >= parentTop && childBottom <= parentBottom) {
                                 missing--;
@@ -101,7 +101,7 @@ export const useFloatingProvider = (options = { enabled: true }) => {
                     // to show more items.
                     if (missing >= 1) {
                         setInnerOffset((existingOffset) => {
-                            let newInnerOffset = elementHeight * missing - // `missing` amount of `elementHeight`
+                            const newInnerOffset = elementHeight * missing - // `missing` amount of `elementHeight`
                                 elementAmountVisible + // The amount of the last item that is visible
                                 scrollPaddingBottom; // The scroll padding to ensure the UI looks good
                             // Nudged enough already, no need to continue
@@ -154,7 +154,7 @@ export const useFloatingProvider = (options = { enabled: true }) => {
     const { refs, floatingStyles, context } = $derived(floating);
     // Calculate placement information to expose as data attributes
     const { exposedTo, exposedAlign } = $derived.by(() => {
-        let [exposedTo = to, exposedAlign = align] = context.placement.split("-");
+        const [exposedTo = to, exposedAlign = align] = context.placement.split("-");
         return { exposedTo: to === "selection" ? "selection" : exposedTo, exposedAlign };
     });
     // If user-land code is using custom styles specifically for `bottom`, but
@@ -164,7 +164,7 @@ export const useFloatingProvider = (options = { enabled: true }) => {
     const data = $derived({
         anchor: [exposedTo, exposedAlign].filter(Boolean).join(" "),
     });
-    let innerOffsetConfig = useInnerOffset({
+    const innerOffsetConfig = useInnerOffset({
         get context() {
             return context;
         },
@@ -175,7 +175,7 @@ export const useFloatingProvider = (options = { enabled: true }) => {
             };
         },
     });
-    let { getReferenceProps, getFloatingProps } = useInteractions({
+    const { getReferenceProps, getFloatingProps } = useInteractions({
         get propsList() {
             return [innerOffsetConfig];
         },

package/dist/internal/floating.svelte.js CHANGED Viewed

@@ -58,6 +58,7 @@ export function useFloatingPanel(options = { placement: null }) {
         }
         : undefined));
     const stablePlacement = $derived.by(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         trigger;
         return untrack(() => placement);
     });

package/dist/popover/Popover.svelte ADDED Viewed

@@ -0,0 +1,161 @@
+<script lang="ts" module>export const DEFAULT_POPOVER_TAG = "div";
+</script>
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_POPOVER_TAG">import { getOwnerDocument } from "../utils/owner.js";
+import { setContext, untrack } from "svelte";
+import {
+  createPopoverContext,
+  PopoverStates,
+  usePopoverGroupContext
+} from "./context.svelte.js";
+import { FocusableMode, getFocusableElements, isFocusableElement } from "../utils/focus-management.js";
+import { useNestedPortals } from "../portal/InternalPortal.svelte";
+import MainTreeProvider, { useMainTreeNode } from "../internal/MainTreeProvider.svelte";
+import { useRootContainers } from "../hooks/use-root-containers.svelte.js";
+import { useEventListener } from "../hooks/use-event-listener.svelte.js";
+import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
+import { useFloatingProvider } from "../internal/floating-provider.svelte.js";
+import { createCloseContext } from "../internal/close-provider.js";
+import { createOpenClosedContext, State } from "../internal/open-closed.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+let { ref = $bindable(), __demoMode = false, ...theirProps } = $props();
+let buttons = $state([]);
+const context = createPopoverContext({
+  __demoMode,
+  popoverState: __demoMode ? PopoverStates.Open : PopoverStates.Closed,
+  buttons
+});
+const {
+  popoverState,
+  button,
+  buttonId,
+  panel,
+  panelId,
+  beforePanelSentinel,
+  afterPanelSentinel,
+  afterButtonSentinel
+} = $derived(context);
+const ownerDocument = $derived(getOwnerDocument(ref ?? button));
+const isPortalled = $derived.by(() => {
+  if (!button) return false;
+  if (!panel) return false;
+  return untrack(() => {
+    for (let root2 of document.querySelectorAll("body > *")) {
+      if (Number(root2?.contains(button)) ^ Number(root2?.contains(panel))) {
+        return true;
+      }
+    }
+    let elements = getFocusableElements();
+    let buttonIdx = elements.indexOf(button);
+    let beforeIdx = (buttonIdx + elements.length - 1) % elements.length;
+    let afterIdx = (buttonIdx + 1) % elements.length;
+    let beforeElement = elements[beforeIdx];
+    let afterElement = elements[afterIdx];
+    if (!panel.contains(beforeElement) && !panel.contains(afterElement)) {
+      return true;
+    }
+    return false;
+  });
+});
+const registerBag = $derived({
+  buttonId,
+  panelId,
+  close: () => context.closePopover()
+});
+const groupContext = usePopoverGroupContext();
+const registerPopover = $derived(groupContext?.registerPopover);
+const isFocusWithinPopoverGroup = () => {
+  return groupContext?.isFocusWithinPopoverGroup() ?? (ownerDocument?.activeElement && (button?.contains(ownerDocument.activeElement) || panel?.contains(ownerDocument.activeElement)));
+};
+$effect(() => registerPopover?.(registerBag));
+const nestedPortals = useNestedPortals();
+const { portals } = $derived(nestedPortals);
+const mainTreeNode = useMainTreeNode({
+  get fallbackMainTreeNode() {
+    return button;
+  }
+});
+const root = useRootContainers({
+  get mainTreeNode() {
+    return mainTreeNode.node;
+  },
+  get portals() {
+    return portals;
+  },
+  get defaultContainers() {
+    return [button, panel];
+  }
+});
+useEventListener({
+  get element() {
+    return ownerDocument?.defaultView;
+  },
+  type: "focus",
+  listener: (event) => {
+    if (event.target === window) return;
+    if (!(event.target instanceof HTMLElement)) return;
+    if (popoverState !== PopoverStates.Open) return;
+    if (isFocusWithinPopoverGroup()) return;
+    if (!button) return;
+    if (!panel) return;
+    if (root.contains(event.target)) return;
+    if (beforePanelSentinel?.contains?.(event.target)) return;
+    if (afterPanelSentinel?.contains?.(event.target)) return;
+    if (afterButtonSentinel?.contains?.(event.target)) return;
+    context.closePopover();
+  },
+  options: true
+});
+const outsideClickEnabled = $derived(popoverState === PopoverStates.Open);
+useOutsideClick({
+  get enabled() {
+    return outsideClickEnabled;
+  },
+  get containers() {
+    return root.resolvedContainers;
+  },
+  cb: (event, target) => {
+    context.closePopover();
+    if (!isFocusableElement(target, FocusableMode.Loose)) {
+      event.preventDefault();
+      button?.focus();
+    }
+  }
+});
+const close = (focusableElement) => {
+  context.closePopover();
+  const restoreElement = (() => {
+    if (!focusableElement) return button;
+    if (focusableElement instanceof HTMLElement) return focusableElement;
+    return button;
+  })();
+  restoreElement?.focus();
+};
+const api = {
+  close,
+  get isPortalled() {
+    return isPortalled;
+  }
+};
+setContext("PopoverAPIContext", api);
+const slot = $derived({
+  open: popoverState === PopoverStates.Open,
+  close
+});
+useFloatingProvider();
+setContext("PopoverPanelContext", void 0);
+createCloseContext({
+  get close() {
+    return close;
+  }
+});
+createOpenClosedContext({
+  get value() {
+    return context.popoverState === PopoverStates.Open ? State.Open : State.Closed;
+  }
+});
+</script>
+<MainTreeProvider node={mainTreeNode.node}>
+  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_POPOVER_TAG} name="Popover" bind:ref />
+</MainTreeProvider>

package/dist/popover/Popover.svelte.d.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import type { ElementType, Props } from "../utils/types.js";
+export declare const DEFAULT_POPOVER_TAG: "div";
+type PopoverRenderPropArg = {
+    open: boolean;
+    close(focusableElement?: HTMLElement | MouseEvent<HTMLElement>): void;
+};
+type PopoverPropsWeControl = never;
+export type PopoverProps<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> = Props<TTag, PopoverRenderPropArg, PopoverPropsWeControl, {
+    __demoMode?: boolean;
+}>;
+import { type MouseEvent } from "./context.svelte.js";
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "__demoMode"> 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<[PopoverRenderPropArg, 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: PopoverRenderPropArg) => string) | undefined;
+    } : {}) & {
+        __demoMode?: boolean;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_POPOVER_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_POPOVER_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 Popover: $$IsomorphicComponent;
+type Popover<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> = InstanceType<typeof Popover<TTag>>;
+export default Popover;

package/dist/popover/PopoverBackdrop.svelte ADDED Viewed

@@ -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 ADDED Viewed

@@ -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;