@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.2-next.2

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

@@ -0,0 +1,42 @@
+import type { ElementType, Props } from "../utils/types.js";
+import type { Snippet } from "svelte";
+declare let DEFAULT_MENU_TAG: string;
+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;
+}>;
+export type MenuChildren<T> = Snippet<[MenuRenderPropArg]>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_MENU_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("../utils/types.js").Children<MenuRenderPropArg> | 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: MenuRenderPropArg) => string) | undefined;
+    } : {}) & {
+        __demoMode?: boolean;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_MENU_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_MENU_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 Menu: $$IsomorphicComponent;
+type Menu<TTag extends ElementType = typeof DEFAULT_MENU_TAG> = InstanceType<typeof Menu<TTag>>;
+export default Menu;

package/dist/menu/MenuButton.svelte

@@ -0,0 +1,127 @@
+<script lang="ts" module>import { tick } from "svelte";
+const DEFAULT_BUTTON_TAG = "button";
+</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
+} = $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;
+  }
+};
+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;
+    }
+  })
+);
+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
+});
+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
+    },
+    focusProps,
+    hoverProps,
+    pressProps
+  )
+);
+</script>
+
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="MenuButton" bind:ref />

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

@@ -0,0 +1,52 @@
+import { type Snippet } from "svelte";
+import type { Props, ElementType } from "../utils/types.js";
+declare const DEFAULT_BUTTON_TAG: "button";
+type ButtonRenderPropArg = {
+    open: boolean;
+    active: boolean;
+    hover: boolean;
+    focus: boolean;
+    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, {
+    id?: string;
+    disabled?: boolean;
+    autofocus?: boolean;
+    type?: string;
+}>;
+export type MenuButtonChildren = Snippet<[ButtonRenderPropArg]>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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?: import("../utils/types.js").Children<ButtonRenderPropArg> | 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: ButtonRenderPropArg) => string) | undefined;
+    } : {}) & {
+        id?: string;
+        disabled?: boolean;
+        autofocus?: boolean;
+        type?: string;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    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']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
+    }): 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>>;
+export default MenuButton;

package/dist/menu/MenuHeading.svelte

@@ -0,0 +1,19 @@
+<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
+} = $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/MenuHeading.svelte.d.ts

@@ -0,0 +1,39 @@
+import { type Snippet } from "svelte";
+import type { ElementType, 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, {
+    id?: string;
+}>;
+export type MenuHeadingChildren = Snippet<[HeadingRenderPropArg]>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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?: import("../utils/types.js").Children<HeadingRenderPropArg> | 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: HeadingRenderPropArg) => string) | undefined;
+    } : {}) & {
+        id?: string;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    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']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
+    }): 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>>;
+export default MenuHeading;

package/dist/menu/MenuItem.svelte

@@ -0,0 +1,114 @@
+<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 } 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();
+  }
+});
+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 />

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

@@ -0,0 +1,49 @@
+import type { Props, ElementType, Children } from "../utils/types.js";
+declare const DEFAULT_ITEM_TAG: "svelte:fragment";
+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>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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?: Children<ItemRenderPropArg> | 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: ItemRenderPropArg) => string) | undefined;
+    } : {}) & {
+        id?: string;
+        disabled?: boolean;
+        children: Children<ItemRenderPropArg>;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    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']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
+    }): 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>>;
+export default MenuItem;