@pzerelles/headlessui-svelte 2.1.2-next.6 → 2.1.2-next.8

package/dist/menu/MenuButton.svelte

@@ -1,169 +1,127 @@
-<script lang="ts" module>
-  import { tick, type Snippet } from "svelte"
-  import type { Props, ElementType } from "../utils/types.js"
+<script lang="ts" module>import { tick } from "svelte";
+const DEFAULT_BUTTON_TAG = "button";
+</script>
 
-  const DEFAULT_BUTTON_TAG = "button" as const
-  type ButtonRenderPropArg = {
-    open: boolean
-    active: boolean
-    hover: boolean
-    focus: boolean
-    disabled: boolean
-    autofocus: boolean
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">import { useId } from "../hooks/use-id.js";
+import { Focus } from "../utils/calculate-active-index.js";
+import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
+import { useActivePress } from "../hooks/use-active-press.svelte.js";
+import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
+import { useFloating } from "../internal/floating.svelte.js";
+import { useHover } from "../hooks/use-hover.svelte.js";
+import { mergeProps } from "../utils/render.js";
+import { MenuStates, useMenuContext } from "./context.svelte.js";
+import { untrack } from "svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const internalId = useId();
+let {
+  ref = $bindable(),
+  id = `headlessui-menu-button-${internalId}`,
+  disabled = false,
+  autofocus = false,
+  ...theirProps
+} = $props();
+const _state = useMenuContext("MenuButton");
+const { setReference, getReferenceProps: getFloatingReferenceProps } = useFloating();
+$effect(() => {
+  untrack(() => _state.setButtonElement(ref ? ref : null));
+  setReference(ref);
+});
+const handleKeyDown = async (event) => {
+  switch (event.key) {
+    case " ":
+    case "Enter":
+    case "ArrowDown":
+      event.preventDefault();
+      event.stopPropagation();
+      _state.openMenu();
+      await tick();
+      _state.goToItem({ focus: Focus.First });
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      event.stopPropagation();
+      _state.openMenu();
+      await tick();
+      _state.goToItem({ focus: Focus.Last });
+      break;
   }
-  type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup"
-
-  export type MenuButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<
-    TTag,
-    ButtonRenderPropArg,
-    ButtonPropsWeControl,
-    {
-      id?: string
-      disabled?: boolean
-      autofocus?: boolean
-      type?: string
+};
+const handleKeyUp = (event) => {
+  switch (event.key) {
+    case " ":
+      event.preventDefault();
+      break;
+  }
+};
+const handleClick = async (event) => {
+  if (disabled) return;
+  if (_state.menuState === MenuStates.Open) {
+    _state.closeMenu();
+    await tick();
+    _state.buttonElement?.focus({ preventScroll: true });
+  } else {
+    event.preventDefault();
+    _state.openMenu();
+  }
+};
+const { isFocusVisible: focus, focusProps } = $derived(
+  useFocusRing({
+    get autofocus() {
+      return autofocus;
     }
-  >
-
-  export type MenuButtonChildren = Snippet<[ButtonRenderPropArg]>
-</script>
-
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
-  import { useId } from "../hooks/use-id.js"
-  import { Focus } from "../utils/calculate-active-index.js"
-  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
-  import { useActivePress } from "../hooks/use-active-press.svelte.js"
-  import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js"
-  import { useFloating } from "../internal/floating.svelte.js"
-  import { useHover } from "../hooks/use-hover.svelte.js"
-  import { mergeProps } from "../utils/render.js"
-  import { MenuStates, useMenuContext } from "./context.svelte.js"
-  import { untrack } from "svelte"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-
-  const internalId = useId()
-  let {
-    ref = $bindable(),
-    id = `headlessui-menu-button-${internalId}`,
-    disabled = false,
-    autofocus = false,
-    ...theirProps
-  }: { as?: TTag } & MenuButtonProps<TTag> = $props()
-  const _state = useMenuContext("MenuButton")
-  const { setReference, getReferenceProps: getFloatingReferenceProps } = useFloating()
-  $effect(() => {
-    untrack(() => _state.setButtonElement(ref ? (ref as HTMLButtonElement) : null))
-    setReference(ref)
   })
-
-  const handleKeyDown = async (event: KeyboardEvent) => {
-    switch (event.key) {
-      // Ref: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/#keyboard-interaction-13
-
-      case " ":
-      case "Enter":
-      case "ArrowDown":
-        event.preventDefault()
-        event.stopPropagation()
-        _state.openMenu()
-        await tick()
-        _state.goToItem({ focus: Focus.First })
-        break
-
-      case "ArrowUp":
-        event.preventDefault()
-        event.stopPropagation()
-        _state.openMenu()
-        await tick()
-        _state.goToItem({ focus: Focus.Last })
-        break
-    }
-  }
-
-  const handleKeyUp = (event: KeyboardEvent) => {
-    switch (event.key) {
-      case " ":
-        // Required for firefox, event.preventDefault() in handleKeyDown for
-        // the Space key doesn't cancel the handleKeyUp, which in turn
-        // triggers a *click*.
-        event.preventDefault()
-        break
+);
+const { isHovered: hover, hoverProps } = $derived(
+  useHover({
+    get disabled() {
+      return disabled;
     }
-  }
-
-  const handleClick = async (event: MouseEvent) => {
-    //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
-    if (disabled) return
-    if (_state.menuState === MenuStates.Open) {
-      _state.closeMenu()
-      await tick()
-      _state.buttonElement?.focus({ preventScroll: true })
-    } else {
-      event.preventDefault()
-      _state.openMenu()
+  })
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
     }
+  })
+);
+const slot = $derived({
+  open: _state.menuState === MenuStates.Open,
+  active: active || _state.menuState === MenuStates.Open,
+  disabled,
+  hover,
+  focus,
+  autofocus: autofocus ?? false
+});
+const buttonType = useResolveButtonType({
+  get props() {
+    return { type: theirProps.type, as: theirProps.as };
+  },
+  get ref() {
+    return { current: _state.buttonElement };
   }
-
-  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 slot = $derived({
-    open: _state.menuState === MenuStates.Open,
-    active: active || _state.menuState === MenuStates.Open,
-    disabled,
-    hover,
-    focus,
-    autofocus: autofocus ?? false,
-  } satisfies ButtonRenderPropArg)
-
-  const buttonType = useResolveButtonType({
-    get props() {
-      return { type: theirProps.type, as: theirProps.as }
-    },
-    get ref() {
-      return { current: _state.buttonElement }
+});
+const ourProps = $derived(
+  mergeProps(
+    {
+      ...getFloatingReferenceProps(),
+      id,
+      type: buttonType.type,
+      "aria-haspopup": "menu",
+      "aria-controls": _state.itemsElement?.id,
+      "aria-expanded": _state.menuState === MenuStates.Open,
+      disabled: disabled || void 0,
+      autofocus,
+      onkeydown: handleKeyDown,
+      onkeyup: handleKeyUp,
+      onclick: handleClick
     },
-  })
-
-  const ourProps = $derived(
-    mergeProps(
-      {
-        ...getFloatingReferenceProps(),
-        id,
-        type: buttonType.type,
-        "aria-haspopup": "menu",
-        "aria-controls": _state.itemsElement?.id,
-        "aria-expanded": _state.menuState === MenuStates.Open,
-        disabled: disabled || undefined,
-        autofocus,
-        onkeydown: handleKeyDown,
-        onkeyup: handleKeyUp,
-        onclick: handleClick,
-      },
-      focusProps,
-      hoverProps,
-      pressProps
-    )
+    focusProps,
+    hoverProps,
+    pressProps
   )
+);
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="MenuButton" bind:ref />

package/dist/menu/MenuHeading.svelte

@@ -1,39 +1,19 @@
-<script lang="ts" module>
-  import { onMount, type Snippet } from "svelte"
-  import type { ElementType, Props } from "../utils/types.js"
-
-  const DEFAULT_HEADING_TAG = "header" as const
-  type HeadingRenderPropArg = {}
-  type HeadingPropsWeControl = "role"
-
-  export type MenuHeadingProps<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> = Props<
-    TTag,
-    HeadingRenderPropArg,
-    HeadingPropsWeControl,
-    {
-      id?: string
-    }
-  >
-
-  export type MenuHeadingChildren = Snippet<[HeadingRenderPropArg]>
+<script lang="ts" module>import { onMount } from "svelte";
+const DEFAULT_HEADING_TAG = "header";
 </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
-  }: { as?: TTag } & MenuHeadingProps<TTag> = $props()
-
-  const context = useLabelContext()
-  onMount(() => context.register(id))
-
-  const ourProps = $derived({ id, role: "presentation", ...context.props })
+<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>
 
 <ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_HEADING_TAG} name="MenuItem" bind:ref />

package/dist/menu/MenuItem.svelte

@@ -1,152 +1,114 @@
-<script lang="ts" module>
-  import type { Props, ElementType, Children } from "../utils/types.js"
-  import { onMount, type Snippet } from "svelte"
-
-  const DEFAULT_ITEM_TAG = "svelte:fragment" as const
-  type ItemRenderPropArg = {
-    /** @deprecated use `focus` instead */
-    active: boolean
-    focus: boolean
-    disabled: boolean
-    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 | "children",
-    {
-      id?: string
-      disabled?: boolean
-      children: Children<ItemRenderPropArg>
-    }
-  >
-
-  export type MenuItemChildren = Children<ItemRenderPropArg>
+<script lang="ts" module>import { onMount } from "svelte";
+const DEFAULT_ITEM_TAG = "svelte:fragment";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_ITEM_TAG">
-  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 {
-    ref = $bindable(),
-    id = `headlessui-menu-item-${internalId}`,
-    disabled = false,
-    ...theirProps
-  }: { as?: TTag } & MenuItemProps<TTag> = $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(() => {
-      ;(ref as HTMLElement)?.scrollIntoView?.({ block: "nearest" })
-    })
-  })
-
-  const getTextValue = useTextValue({
-    get element() {
-      return ref || null
-    },
-  })
-
-  const bag: MenuItemDataRef["current"] = $derived({
-    disabled,
-    domRef: { current: ref || 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 })
+<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 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 bag = $derived({
+  disabled,
+  domRef: { current: ref || null },
+  get textValue() {
+    return getTextValue();
   }
-
-  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,
-    })
-  )
+});
+onMount(() => {
+  _state.registerItem(id, {
+    get current() {
+      return bag;
+    }
+  });
+  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>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_ITEM_TAG} name="MenuItem" bind:ref />