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

package/dist/menu/context.svelte.js

@@ -1,4 +1,6 @@
-import { getContext } from "svelte";
+import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
+import { sortByDomNode } from "../utils/focus-management.js";
+import { getContext, setContext } from "svelte";
 export var MenuStates;
 (function (MenuStates) {
     MenuStates[MenuStates["Open"] = 0] = "Open";
@@ -12,10 +14,218 @@ export var ActivationTrigger;
 export function useMenuContext(component) {
     const context = getContext("MenuContext");
     if (!context) {
-        let err = new Error(`<${component} /> is missing a parent <Menu /> component.`);
+        const err = new Error(`<${component} /> is missing a parent <Menu /> component.`);
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useMenuContext);
         throw err;
     }
     return context;
 }
+function adjustOrderedState(state, adjustment = (i) => i) {
+    const currentActiveItem = state.activeItemIndex !== null ? state.items[state.activeItemIndex] : null;
+    const sortedItems = sortByDomNode(adjustment(state.items.slice()), (item) => item.dataRef.current.domRef.current);
+    // If we inserted an item before the current active item then the active item index
+    // would be wrong. To fix this, we will re-lookup the correct index.
+    let adjustedActiveItemIndex = currentActiveItem ? sortedItems.indexOf(currentActiveItem) : null;
+    // Reset to `null` in case the currentActiveItem was removed.
+    if (adjustedActiveItemIndex === -1) {
+        adjustedActiveItemIndex = null;
+    }
+    return {
+        items: sortedItems,
+        activeItemIndex: adjustedActiveItemIndex,
+    };
+}
+export const createMenuContext = (initialState) => {
+    const _state = $state(initialState);
+    const context = {
+        get menuState() {
+            return _state.menuState;
+        },
+        get buttonElement() {
+            return _state.buttonElement;
+        },
+        get itemsElement() {
+            return _state.itemsElement;
+        },
+        get items() {
+            return _state.items;
+        },
+        get searchQuery() {
+            return _state.searchQuery;
+        },
+        get activeItemIndex() {
+            return _state.activeItemIndex;
+        },
+        get activationTrigger() {
+            return _state.activationTrigger;
+        },
+        get __demoMode() {
+            return _state.__demoMode;
+        },
+        closeMenu() {
+            if (_state.menuState === MenuStates.Closed)
+                return _state;
+            _state.activeItemIndex = null;
+            _state.menuState = MenuStates.Closed;
+            return _state;
+        },
+        openMenu() {
+            if (_state.menuState === MenuStates.Open)
+                return _state;
+            /* We can turn off demo mode once we re-open the `Menu` */
+            _state.__demoMode = false;
+            _state.menuState = MenuStates.Open;
+            return _state;
+        },
+        goToItem(action) {
+            if (_state.menuState === MenuStates.Closed)
+                return _state;
+            _state.searchQuery = "";
+            _state.activationTrigger = action.trigger ?? ActivationTrigger.Other;
+            _state.__demoMode = false;
+            // Optimization:
+            //
+            // There is no need to sort the DOM nodes if we know that we don't want to focus anything
+            if (action.focus === Focus.Nothing) {
+                _state.activeItemIndex = null;
+                return _state;
+            }
+            // Optimization:
+            //
+            // There is no need to sort the DOM nodes if we know exactly where to go
+            if (action.focus === Focus.Specific) {
+                _state.activeItemIndex = _state.items.findIndex((o) => o.id === action.id);
+                return _state;
+            }
+            // Optimization:
+            //
+            // If the current DOM node and the previous DOM node are next to each other,
+            // or if the previous DOM node is already the first DOM node, then we don't
+            // have to sort all the DOM nodes.
+            else if (action.focus === Focus.Previous) {
+                const activeItemIdx = _state.activeItemIndex;
+                if (activeItemIdx !== null) {
+                    const currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
+                    const previousItemIndex = calculateActiveIndex(action, {
+                        resolveItems: () => _state.items,
+                        resolveActiveIndex: () => _state.activeItemIndex,
+                        resolveId: (item) => item.id,
+                        resolveDisabled: (item) => item.dataRef.current.disabled,
+                    });
+                    if (previousItemIndex !== null) {
+                        const previousDom = _state.items[previousItemIndex].dataRef.current.domRef;
+                        if (
+                        // Next to each other
+                        currentDom.current?.previousElementSibling === previousDom.current ||
+                            // Or already the first element
+                            previousDom.current?.previousElementSibling === null) {
+                            _state.activeItemIndex = previousItemIndex;
+                            return _state;
+                        }
+                    }
+                }
+            }
+            // Optimization:
+            //
+            // If the current DOM node and the next DOM node are next to each other, or
+            // if the next DOM node is already the last DOM node, then we don't have to
+            // sort all the DOM nodes.
+            else if (action.focus === Focus.Next) {
+                const activeItemIdx = _state.activeItemIndex;
+                if (activeItemIdx !== null) {
+                    const currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
+                    const nextItemIndex = calculateActiveIndex(action, {
+                        resolveItems: () => _state.items,
+                        resolveActiveIndex: () => _state.activeItemIndex,
+                        resolveId: (item) => item.id,
+                        resolveDisabled: (item) => item.dataRef.current.disabled,
+                    });
+                    if (nextItemIndex !== null) {
+                        const nextDom = _state.items[nextItemIndex].dataRef.current.domRef;
+                        if (
+                        // Next to each other
+                        currentDom.current?.nextElementSibling === nextDom.current ||
+                            // Or already the last element
+                            nextDom.current?.nextElementSibling === null) {
+                            _state.activeItemIndex = nextItemIndex;
+                            return _state;
+                        }
+                    }
+                }
+            }
+            // Slow path:
+            //
+            // Ensure all the items are correctly sorted according to DOM position
+            const adjustedState = adjustOrderedState(_state);
+            const activeItemIndex = calculateActiveIndex(action, {
+                resolveItems: () => adjustedState.items,
+                resolveActiveIndex: () => adjustedState.activeItemIndex,
+                resolveId: (item) => item.id,
+                resolveDisabled: (item) => item.dataRef.current.disabled,
+            });
+            _state.items = adjustedState.items;
+            _state.activeItemIndex = activeItemIndex;
+            return _state;
+        },
+        search(value) {
+            const wasAlreadySearching = _state.searchQuery !== "";
+            const offset = wasAlreadySearching ? 0 : 1;
+            const searchQuery = _state.searchQuery + value.toLowerCase();
+            const reOrderedItems = _state.activeItemIndex !== null
+                ? _state.items
+                    .slice(_state.activeItemIndex + offset)
+                    .concat(_state.items.slice(0, _state.activeItemIndex + offset))
+                : _state.items;
+            const matchingItem = reOrderedItems.find((item) => item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled);
+            const matchIdx = matchingItem ? _state.items.indexOf(matchingItem) : -1;
+            if (matchIdx === -1 || matchIdx === _state.activeItemIndex) {
+                _state.searchQuery = searchQuery;
+                return _state;
+            }
+            _state.searchQuery = searchQuery;
+            _state.activeItemIndex = matchIdx;
+            _state.activationTrigger = ActivationTrigger.Other;
+            return _state;
+        },
+        clearSearch() {
+            if (_state.searchQuery === "")
+                return _state;
+            _state.searchQuery = "";
+            return _state;
+        },
+        registerItem(id, dataRef) {
+            const item = { id, dataRef };
+            const adjustedState = adjustOrderedState(_state, (items) => [...items, item]);
+            _state.items = adjustedState.items;
+            _state.activeItemIndex = adjustedState.activeItemIndex;
+            return _state;
+        },
+        unregisterItem(id) {
+            const adjustedState = adjustOrderedState(_state, (items) => {
+                const idx = items.findIndex((a) => a.id === id);
+                if (idx !== -1)
+                    items.splice(idx, 1);
+                return items;
+            });
+            _state.items = adjustedState.items;
+            _state.activeItemIndex = adjustedState.activeItemIndex;
+            _state.activationTrigger = ActivationTrigger.Other;
+            return _state;
+        },
+        setButtonElement(element) {
+            if (_state.buttonElement === element)
+                return _state;
+            _state.buttonElement = element;
+            return _state;
+        },
+        setItemsElement(element) {
+            if (_state.itemsElement === element)
+                return _state;
+            _state.itemsElement = element;
+            return _state;
+        },
+    };
+    setContext("MenuContext", context);
+    return context;
+};

package/dist/menu/index.d.ts

@@ -1,7 +1,7 @@
-export { default as Menu, type MenuProps, type MenuChildren } from "./Menu.svelte";
-export { default as MenuButton, type MenuButtonProps, type MenuButtonChildren } from "./MenuButton.svelte";
-export { default as MenuHeading, type MenuHeadingProps, type MenuHeadingChildren } from "./MenuHeading.svelte";
-export { default as MenuItem, type MenuItemProps, type MenuItemChildren } from "./MenuItem.svelte";
-export { default as MenuItems, type MenuItemsProps, type MenuItemsChildren } from "./MenuItems.svelte";
-export { default as MenuSection, type MenuSectionProps, type MenuSectionChildren } from "./MenuSection.svelte";
-export { default as MenuSeparator, type MenuSeparatorProps, type MenuSeparatorChildren } from "./MenuSeparator.svelte";
+export { default as Menu, type MenuProps } from "./Menu.svelte";
+export { default as MenuButton, type MenuButtonProps } from "./MenuButton.svelte";
+export { default as MenuHeading, type MenuHeadingProps } from "./MenuHeading.svelte";
+export { default as MenuItem, type MenuItemProps } from "./MenuItem.svelte";
+export { default as MenuItems, type MenuItemsProps } from "./MenuItems.svelte";
+export { default as MenuSection, type MenuSectionProps } from "./MenuSection.svelte";
+export { default as MenuSeparator, type MenuSeparatorProps } from "./MenuSeparator.svelte";

package/dist/popover/Popover.svelte

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

@@ -0,0 +1,39 @@
+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>, ("slot" | "as" | "children" | "class" | "ref") | "__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<[{
+            slot: PopoverRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: PopoverRenderPropArg) => string) | null | undefined;
+        ref?: HTMLElement;
+    } & {
+        __demoMode?: boolean;
+    };
+    events(): {};
+    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']> & {}): 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

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

@@ -0,0 +1,43 @@
+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>, ("slot" | "as" | "children" | "class" | "ref") | "unmount" | "static" | "aria-hidden" | "transition"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: BackdropRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: BackdropRenderPropArg) => string) | null | undefined;
+        ref?: HTMLElement;
+    } & {
+        transition?: boolean;
+    } & {
+        static?: boolean | undefined;
+        unmount?: boolean | undefined;
+    };
+    events(): {};
+    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']> & {}): 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;