@pzerelles/headlessui-svelte 2.1.2-next.29 → 2.1.2-next.30

package/dist/listbox/ListboxSelectedOption.svelte

@@ -1,43 +1,20 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-  import type { Snippet } from "svelte"
-
-  const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment"
-  type SelectedOptionRenderPropArg = {}
-  type SelectedOptionPropsWeControl = never
-
-  export type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<
-    TTag,
-    SelectedOptionRenderPropArg,
-    SelectedOptionPropsWeControl,
-    {
-      options: Snippet
-      placeholder?: Snippet
-    }
-  >
+<script lang="ts" module>const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG">
-  import { useData, ValueMode } from "./Listbox.svelte"
-  import { setContext } from "svelte"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-
-  let {
-    ref = $bindable(),
-    options,
-    placeholder,
-    ...theirProps
-  }: { as?: TTag } & ListboxSelectedOptionProps<TTag> = $props()
-
-  const data = useData("ListboxSelectedOption")
-
-  const shouldShowPlaceholder = $derived(
-    data.value === undefined ||
-      data.value === null ||
-      (data.mode === ValueMode.Multi && Array.isArray(data.value) && data.value.length === 0)
-  )
-
-  setContext("SelectedOptionContext", true)
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG">import { useData, ValueMode } from "./Listbox.svelte";
+import { setContext } from "svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+let {
+  ref = $bindable(),
+  options,
+  placeholder,
+  ...theirProps
+} = $props();
+const data = useData("ListboxSelectedOption");
+const shouldShowPlaceholder = $derived(
+  data.value === void 0 || data.value === null || data.mode === ValueMode.Multi && Array.isArray(data.value) && data.value.length === 0
+);
+setContext("SelectedOptionContext", true);
 </script>
 
 {#snippet children()}

package/dist/menu/Menu.svelte

@@ -1,84 +1,57 @@
-<script lang="ts" module>
-  import { useOutsideClick } from "../hooks/use-outside-click.svelte.js"
-  import { useFloatingProvider } from "../internal/floating.svelte.js"
-  import { createOpenClosedContext, State } from "../internal/open-closed.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { FocusableMode, isFocusableElement } from "../utils/focus-management.js"
-  import { match } from "../utils/match.js"
-  import type { ElementType, Props } from "../utils/types.js"
-  import type { Snippet } from "svelte"
-
-  let DEFAULT_MENU_TAG = "svelte:fragment"
-  type MenuRenderPropArg = {
-    open: boolean
-    close: () => void
-  }
-  type MenuPropsWeControl = never
-
-  export type MenuProps<TTag extends ElementType = typeof DEFAULT_MENU_TAG> = Props<
-    TTag,
-    MenuRenderPropArg,
-    MenuPropsWeControl,
-    {
-      __demoMode?: boolean
-    }
-  >
+<script lang="ts" module>import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
+import { useFloatingProvider } from "../internal/floating.svelte.js";
+import { createOpenClosedContext, State } from "../internal/open-closed.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { FocusableMode, isFocusableElement } from "../utils/focus-management.js";
+import { match } from "../utils/match.js";
+let DEFAULT_MENU_TAG = "svelte:fragment";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_MENU_TAG">
-  import { ActivationTrigger, createMenuContext, MenuStates, type StateDefinition } from "./context.svelte.js"
-
-  let { ref = $bindable(), __demoMode = false, ...theirProps }: { as?: TTag } & MenuProps<TTag> = $props()
-
-  const context = createMenuContext({
-    __demoMode,
-    menuState: __demoMode ? MenuStates.Open : MenuStates.Closed,
-    buttonElement: null,
-    itemsElement: null,
-    items: [],
-    searchQuery: "",
-    activeItemIndex: null,
-    activationTrigger: ActivationTrigger.Other,
-  } as StateDefinition)
-  const { menuState, itemsElement, buttonElement } = $derived(context)
-
-  // Handle outside click
-  const outsideClickEnabled = $derived(menuState === MenuStates.Open)
-  useOutsideClick({
-    get enabled() {
-      return outsideClickEnabled
-    },
-    get containers() {
-      return [buttonElement, itemsElement]
-    },
-    cb: (event, target) => {
-      context.closeMenu()
-
-      if (!isFocusableElement(target, FocusableMode.Loose)) {
-        event.preventDefault()
-        buttonElement?.focus()
-      }
-    },
-  })
-
-  const slot = $derived({
-    open: context.menuState === MenuStates.Open,
-    close: context.closeMenu,
-  } satisfies MenuRenderPropArg)
-
-  useFloatingProvider()
-
-  const openClosed = $derived(
-    match(menuState, {
-      [MenuStates.Open]: State.Open,
-      [MenuStates.Closed]: State.Closed,
-    })
-  )
-  createOpenClosedContext({
-    get value() {
-      return openClosed
-    },
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_MENU_TAG">import { ActivationTrigger, createMenuContext, MenuStates } from "./context.svelte.js";
+let { ref = $bindable(), __demoMode = false, ...theirProps } = $props();
+const context = createMenuContext({
+  __demoMode,
+  menuState: __demoMode ? MenuStates.Open : MenuStates.Closed,
+  buttonElement: null,
+  itemsElement: null,
+  items: [],
+  searchQuery: "",
+  activeItemIndex: null,
+  activationTrigger: ActivationTrigger.Other
+});
+const { menuState, itemsElement, buttonElement } = $derived(context);
+const outsideClickEnabled = $derived(menuState === MenuStates.Open);
+useOutsideClick({
+  get enabled() {
+    return outsideClickEnabled;
+  },
+  get containers() {
+    return [buttonElement, itemsElement];
+  },
+  cb: (event, target) => {
+    context.closeMenu();
+    if (!isFocusableElement(target, FocusableMode.Loose)) {
+      event.preventDefault();
+      buttonElement?.focus();
+    }
+  }
+});
+const slot = $derived({
+  open: context.menuState === MenuStates.Open,
+  close: context.closeMenu
+});
+useFloatingProvider();
+const openClosed = $derived(
+  match(menuState, {
+    [MenuStates.Open]: State.Open,
+    [MenuStates.Closed]: State.Closed
   })
+);
+createOpenClosedContext({
+  get value() {
+    return openClosed;
+  }
+});
 </script>
 
 <ElementOrComponent {theirProps} {slot} defaultTag={DEFAULT_MENU_TAG} name="Menu" bind:ref />

package/dist/menu/MenuButton.svelte

@@ -1,169 +1,129 @@
-<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 { useFloatingReference, useFloatingReferenceProps } 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 floatingReference = useFloatingReference();
+const { setReference } = $derived(floatingReference);
+const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps();
+$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;
     }
-  >
-</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 { useFloatingReference, useFloatingReferenceProps } 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 floatingReference = useFloatingReference()
-  const { setReference } = $derived(floatingReference)
-  const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps()
-  $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,37 +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
-    }
-  >
+<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 />