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

package/dist/menu/MenuButton.svelte.d.ts

@@ -1,5 +1,4 @@
-import { type Snippet } from "svelte";
-import type { Props, ElementType } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_BUTTON_TAG: "button";
 type ButtonRenderPropArg = {
     open: boolean;
@@ -9,41 +8,12 @@ type ButtonRenderPropArg = {
     disabled: boolean;
     autofocus: boolean;
 };
-type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup";
-export type MenuButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+export type MenuButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, {
+    element?: HTMLElement;
     id?: string;
     disabled?: boolean;
     autofocus?: boolean;
     type?: string;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "type" | "id" | ButtonPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[{
-            slot: ButtonRenderPropArg;
-            props: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: ButtonRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        id?: string;
-        disabled?: boolean;
-        autofocus?: boolean;
-        type?: string;
-    };
-    events(): {};
-    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']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const MenuButton: $$IsomorphicComponent;
-type MenuButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof MenuButton<TTag>>;
+declare const MenuButton: import("svelte").Component<MenuButtonProps, {}, "element">;
 export default MenuButton;

package/dist/menu/MenuHeading.svelte

@@ -1,19 +1,38 @@
-<script lang="ts" module>import { onMount } from "svelte";
-const DEFAULT_HEADING_TAG = "header";
+<script lang="ts" module>
+  import { onMount } from "svelte"
+  import type { SvelteHTMLElements } from "svelte/elements"
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_HEADING_TAG = "header" as const
+  type HeadingRenderPropArg = {}
+  type HeadingPropsWeControl = "role"
+
+  export type MenuHeadingProps = Props<
+    typeof DEFAULT_HEADING_TAG,
+    HeadingRenderPropArg,
+    {
+      element?: HTMLElement
+      id?: string
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_HEADING_TAG">import { useId } from "../hooks/use-id.js";
-import { useLabelContext } from "../label/context.svelte.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-menu-heading-${internalId}`,
-  ...theirProps
-} = $props();
-const context = useLabelContext();
-onMount(() => context.register(id));
-const ourProps = $derived({ id, role: "presentation", ...context.props });
+<script lang="ts">
+  import { useId } from "../hooks/use-id.js"
+  import { useLabelContext } from "../label/context.svelte.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = useId()
+  let {
+    element = $bindable(),
+    id = `headlessui-menu-heading-${internalId}`,
+    ...theirProps
+  }: MenuHeadingProps = $props()
+
+  const context = useLabelContext()
+  onMount(() => context.register(id))
+
+  const ourProps = $derived({ id, role: "presentation", ...context.props })
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_HEADING_TAG} name="MenuItem" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_HEADING_TAG} name="MenuItem" bind:element />

package/dist/menu/MenuHeading.svelte.d.ts

@@ -1,36 +1,9 @@
-import { type Snippet } from "svelte";
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_HEADING_TAG: "header";
 type HeadingRenderPropArg = {};
-type HeadingPropsWeControl = "role";
-export type MenuHeadingProps<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> = Props<TTag, HeadingRenderPropArg, HeadingPropsWeControl, {
+export type MenuHeadingProps = Props<typeof DEFAULT_HEADING_TAG, HeadingRenderPropArg, {
+    element?: HTMLElement;
     id?: string;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "id" | "role"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[{
-            slot: HeadingRenderPropArg;
-            props: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: HeadingRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        id?: string;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_HEADING_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_HEADING_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const MenuHeading: $$IsomorphicComponent;
-type MenuHeading<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> = InstanceType<typeof MenuHeading<TTag>>;
+declare const MenuHeading: import("svelte").Component<MenuHeadingProps, {}, "element">;
 export default MenuHeading;

package/dist/menu/MenuItem.svelte

@@ -1,114 +1,149 @@
-<script lang="ts" module>import { onMount } from "svelte";
-const DEFAULT_ITEM_TAG = "svelte:fragment";
-</script>
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+  import { onMount } from "svelte"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_ITEM_TAG">import { useId } from "../hooks/use-id.js";
-import { ActivationTrigger, MenuStates, useMenuContext } from "./context.svelte.js";
-import { disposables } from "../utils/disposables.js";
-import { useTextValue } from "../hooks/use-text-value.svelte.js";
-import { restoreFocusIfNecessary } from "../utils/focus-management.js";
-import { Focus } from "../utils/calculate-active-index.js";
-import { useTrackedPointer } from "../hooks/use-tracked-pointer.js";
-import { useLabels } from "../label/context.svelte.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { mergeProps } from "../utils/render.js";
-import { useDescriptions } from "../description/context.svelte.js";
-const internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-menu-item-${internalId}`,
-  disabled = false,
-  ...theirProps
-} = $props();
-const _state = useMenuContext("MenuItem");
-const active = $derived(_state.activeItemIndex !== null ? _state.items[_state.activeItemIndex].id === id : false);
-$effect(() => {
-  _state.activeItemIndex;
-  if (_state.__demoMode) return;
-  if (_state.menuState !== MenuStates.Open) return;
-  if (!active) return;
-  if (_state.activationTrigger === ActivationTrigger.Pointer) return;
-  return disposables().requestAnimationFrame(() => {
-    ;
-    ref?.scrollIntoView?.({ block: "nearest" });
-  });
-});
-const getTextValue = useTextValue({
-  get element() {
-    return ref || null;
-  }
-});
-const bag = $derived({
-  disabled,
-  domRef: { current: ref || null },
-  get textValue() {
-    return getTextValue();
+  const DEFAULT_ITEM_TAG = "button" as const
+  type ItemRenderPropArg = {
+    /** @deprecated use `focus` instead */
+    active: boolean
+    focus: boolean
+    disabled: boolean
+    close: () => void
+    props?: Record<string, any>
   }
-});
-onMount(() => {
-  _state.registerItem(id, {
-    get current() {
-      return bag;
+  type ItemPropsWeControl = "aria-describedby" | "aria-disabled" | "aria-labelledby" | "role" | "tabIndex"
+
+  export type MenuItemProps = Props<
+    typeof DEFAULT_ITEM_TAG,
+    ItemRenderPropArg,
+    {
+      element?: HTMLElement
+      id?: string
+      disabled?: boolean
     }
-  });
-  return () => _state.unregisterItem(id);
-});
-const handleClick = (event) => {
-  if (disabled) return event.preventDefault();
-  _state.closeMenu();
-  restoreFocusIfNecessary(_state.buttonElement);
-};
-const handleFocus = () => {
-  if (disabled) return _state.goToItem({ focus: Focus.Nothing });
-  _state.goToItem({ focus: Focus.Specific, id });
-};
-const pointer = useTrackedPointer();
-const handleEnter = (evt) => {
-  pointer.update(evt);
-  if (disabled) return;
-  if (active) return;
-  _state.goToItem({ focus: Focus.Specific, id, trigger: ActivationTrigger.Pointer });
-};
-const handleMove = (evt) => {
-  if (!pointer.wasMoved(evt)) return;
-  if (disabled) return;
-  if (active) return;
-  _state.goToItem({ focus: Focus.Specific, id, trigger: ActivationTrigger.Pointer });
-};
-const handleLeave = (evt) => {
-  if (!pointer.wasMoved(evt)) return;
-  if (disabled) return;
-  if (!active) return;
-  _state.goToItem({ focus: Focus.Nothing });
-};
-const labelledby = useLabels();
-const describedby = useDescriptions();
-const slot = $derived({
-  active,
-  focus: active,
-  disabled,
-  close: _state.closeMenu
-});
-const ourProps = $derived(
-  mergeProps({
-    id,
-    role: "menuitem",
-    tabindex: disabled === true ? void 0 : -1,
-    "aria-disabled": disabled === true ? true : void 0,
-    "aria-labelledby": labelledby.value,
-    "aria-describedby": describedby.value,
-    disabled: void 0,
-    // Never forward the `disabled` prop
-    onclick: handleClick,
-    onfocus: handleFocus,
-    onpointerenter: handleEnter,
-    onmouseenter: handleEnter,
-    onpointermove: handleMove,
-    onmousemove: handleMove,
-    onpointerleave: handleLeave,
-    onmouseleave: handleLeave
+  >
+</script>
+
+<script lang="ts">
+  import { useId } from "../hooks/use-id.js"
+  import { ActivationTrigger, MenuStates, useMenuContext, type MenuItemDataRef } from "./context.svelte.js"
+  import { disposables } from "../utils/disposables.js"
+  import { useTextValue } from "../hooks/use-text-value.svelte.js"
+  import { restoreFocusIfNecessary } from "../utils/focus-management.js"
+  import { Focus } from "../utils/calculate-active-index.js"
+  import { useTrackedPointer } from "../hooks/use-tracked-pointer.js"
+  import { useLabels } from "../label/context.svelte.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { mergeProps } from "../utils/render.js"
+  import { useDescriptions } from "../description/context.svelte.js"
+
+  const internalId = useId()
+  let {
+    element = $bindable(),
+    id = `headlessui-menu-item-${internalId}`,
+    disabled = false,
+    ...theirProps
+  }: MenuItemProps = $props()
+  const _state = useMenuContext("MenuItem")
+  const active = $derived(_state.activeItemIndex !== null ? _state.items[_state.activeItemIndex].id === id : false)
+
+  $effect(() => {
+    /* We also want to trigger this when the position of the active item changes so that we can re-trigger the scrollIntoView */
+    _state.activeItemIndex
+    if (_state.__demoMode) return
+    if (_state.menuState !== MenuStates.Open) return
+    if (!active) return
+    if (_state.activationTrigger === ActivationTrigger.Pointer) return
+    return disposables().requestAnimationFrame(() => {
+      ;(element as HTMLElement)?.scrollIntoView?.({ block: "nearest" })
+    })
+  })
+
+  const getTextValue = useTextValue({
+    get element() {
+      return element || null
+    },
+  })
+
+  const bag: MenuItemDataRef["current"] = $derived({
+    disabled,
+    domRef: { current: element || null },
+    get textValue() {
+      return getTextValue()
+    },
+  })
+
+  onMount(() => {
+    _state.registerItem(id, {
+      get current() {
+        return bag
+      },
+    })
+    return () => _state.unregisterItem(id)
   })
-);
+
+  const handleClick = (event: MouseEvent) => {
+    if (disabled) return event.preventDefault()
+    _state.closeMenu()
+    restoreFocusIfNecessary(_state.buttonElement)
+  }
+
+  const handleFocus = () => {
+    if (disabled) return _state.goToItem({ focus: Focus.Nothing })
+    _state.goToItem({ focus: Focus.Specific, id })
+  }
+
+  const pointer = useTrackedPointer()
+
+  const handleEnter = (evt: PointerEvent) => {
+    pointer.update(evt)
+    if (disabled) return
+    if (active) return
+    _state.goToItem({ focus: Focus.Specific, id, trigger: ActivationTrigger.Pointer })
+  }
+
+  const handleMove = (evt: PointerEvent) => {
+    if (!pointer.wasMoved(evt)) return
+    if (disabled) return
+    if (active) return
+    _state.goToItem({ focus: Focus.Specific, id, trigger: ActivationTrigger.Pointer })
+  }
+
+  const handleLeave = (evt: PointerEvent) => {
+    if (!pointer.wasMoved(evt)) return
+    if (disabled) return
+    if (!active) return
+    _state.goToItem({ focus: Focus.Nothing })
+  }
+
+  const labelledby = useLabels()
+  const describedby = useDescriptions()
+
+  const slot = $derived({
+    active,
+    focus: active,
+    disabled,
+    close: _state.closeMenu,
+  } satisfies ItemRenderPropArg)
+  const ourProps = $derived(
+    mergeProps({
+      id,
+      role: "menuitem",
+      tabindex: disabled === true ? undefined : -1,
+      "aria-disabled": disabled === true ? true : undefined,
+      "aria-labelledby": labelledby.value,
+      "aria-describedby": describedby.value,
+      disabled: undefined, // Never forward the `disabled` prop
+      onclick: handleClick,
+      onfocus: handleFocus,
+      onpointerenter: handleEnter,
+      onmouseenter: handleEnter,
+      onpointermove: handleMove,
+      onmousemove: handleMove,
+      onpointerleave: handleLeave,
+      onmouseleave: handleLeave,
+    })
+  )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_ITEM_TAG} name="MenuItem" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_ITEM_TAG} name="MenuItem" bind:element />

package/dist/menu/MenuItem.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Props, ElementType } from "../utils/types.js";
-declare const DEFAULT_ITEM_TAG: "svelte:fragment";
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_ITEM_TAG: "button";
 type ItemRenderPropArg = {
     /** @deprecated use `focus` instead */
     active: boolean;
@@ -8,37 +8,10 @@ type ItemRenderPropArg = {
     close: () => void;
     props?: Record<string, any>;
 };
-type ItemPropsWeControl = "aria-describedby" | "aria-disabled" | "aria-labelledby" | "role" | "tabIndex";
-export type MenuItemProps<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> = Props<TTag, ItemRenderPropArg, ItemPropsWeControl, {
+export type MenuItemProps = Props<typeof DEFAULT_ITEM_TAG, ItemRenderPropArg, {
+    element?: HTMLElement;
     id?: string;
     disabled?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "id" | ItemPropsWeControl> 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: ItemRenderPropArg;
-            props: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: ItemRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        id?: string;
-        disabled?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_ITEM_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_ITEM_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const MenuItem: $$IsomorphicComponent;
-type MenuItem<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> = InstanceType<typeof MenuItem<TTag>>;
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "element">;
 export default MenuItem;