@pzerelles/headlessui-svelte 2.1.2-next.5 → 2.1.2-next.51

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, type MenuRenderPropArg as MenuSlot, type MenuOwnProps } from "./Menu.svelte";
+export { default as MenuButton, type MenuButtonProps, type ButtonRenderPropArg as MenuButtonSlot, type MenuButtonOwnProps, } from "./MenuButton.svelte";
+export { default as MenuHeading, type MenuHeadingProps, type MenuHeadingOwnProps } from "./MenuHeading.svelte";
+export { default as MenuItem, type MenuItemProps, type ItemRenderPropArg as MenuItemSlot, type MenuItemOwnProps, } from "./MenuItem.svelte";
+export { default as MenuItems, type MenuItemsProps, type ItemsRenderPropArg as MenuItemsSlot, type MenuItemsOwnProps, } from "./MenuItems.svelte";
+export { default as MenuSection, type MenuSectionProps, type MenuSectionOwnProps } from "./MenuSection.svelte";
+export { default as MenuSeparator, type MenuSeparatorProps, type MenuSeparatorOwnProps } from "./MenuSeparator.svelte";

package/dist/menu/index.js

@@ -1,7 +1,7 @@
 export { default as Menu } from "./Menu.svelte";
-export { default as MenuButton } from "./MenuButton.svelte";
+export { default as MenuButton, } from "./MenuButton.svelte";
 export { default as MenuHeading } from "./MenuHeading.svelte";
-export { default as MenuItem } from "./MenuItem.svelte";
-export { default as MenuItems } from "./MenuItems.svelte";
+export { default as MenuItem, } from "./MenuItem.svelte";
+export { default as MenuItems, } from "./MenuItems.svelte";
 export { default as MenuSection } from "./MenuSection.svelte";
 export { default as MenuSeparator } from "./MenuSeparator.svelte";

package/dist/popover/Popover.svelte

@@ -0,0 +1,228 @@
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  export const DEFAULT_POPOVER_TAG = "div" as const
+  export type PopoverRenderPropArg = {
+    open: boolean
+    close(focusableElement?: HTMLElement | MouseEvent<HTMLElement>): void
+  }
+  type PopoverPropsWeControl = never
+
+  export type PopoverOwnProps = {
+    element?: HTMLElement
+    __demoMode?: boolean
+  }
+
+  export type PopoverProps = Props<typeof DEFAULT_POPOVER_TAG, PopoverRenderPropArg, PopoverOwnProps>
+</script>
+
+<script lang="ts">
+  import { getOwnerDocument } from "../utils/owner.js"
+
+  import { setContext, untrack } from "svelte"
+  import {
+    createPopoverContext,
+    PopoverStates,
+    usePopoverGroupContext,
+    type MouseEvent,
+    type PopoverAPIContext,
+    type PopoverPanelContext,
+  } 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 { element = $bindable(), __demoMode = false, ...theirProps }: PopoverProps = $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(element ?? button))
+
+  const isPortalled = $derived.by(() => {
+    if (!button) return false
+    if (!panel) return false
+
+    return untrack(() => {
+      // We are part of a different "root" tree, so therefore we can consider it portalled. This is a
+      // heuristic because 3rd party tools could use some form of portal, typically rendered at the
+      // end of the body but we don't have an actual reference to that.
+      for (let root of document.querySelectorAll("body > *")) {
+        if (Number(root?.contains(button)) ^ Number(root?.contains(panel))) {
+          return true
+        }
+      }
+
+      // Use another heuristic to try and calculate whether or not the focusable
+      // elements are near each other (aka, following the default focus/tab order
+      // from the browser). If they are then it doesn't really matter if they are
+      // portalled or not because we can follow the default tab order. But if they
+      // are not, then we can consider it being portalled so that we can ensure
+      // that tab and shift+tab (hopefully) go to the correct spot.
+      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
+      }
+
+      // It may or may not be portalled, but we don't really know.
+      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(() => {
+    registerBag
+    untrack(() => 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]
+    },
+  })
+
+  // Handle focus out
+  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,
+  })
+
+  // Handle outside click
+  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?: HTMLElement | MouseEvent<HTMLElement>) => {
+    context.closePopover()
+
+    const restoreElement = (() => {
+      if (!focusableElement) return button
+      if (focusableElement instanceof HTMLElement) return focusableElement
+
+      return button
+    })()
+
+    restoreElement?.focus()
+  }
+
+  const api: PopoverAPIContext = {
+    close,
+    get isPortalled() {
+      return isPortalled
+    },
+  }
+  setContext("PopoverAPIContext", api)
+
+  const slot = $derived({
+    open: popoverState === PopoverStates.Open,
+    close,
+  } satisfies PopoverRenderPropArg)
+
+  useFloatingProvider()
+
+  setContext<PopoverPanelContext | undefined>("PopoverPanelContext", undefined)
+
+  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:element />
+</MainTreeProvider>

package/dist/popover/Popover.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Props } from "../utils/types.js";
+export declare const DEFAULT_POPOVER_TAG: "div";
+export type PopoverRenderPropArg = {
+    open: boolean;
+    close(focusableElement?: HTMLElement | MouseEvent<HTMLElement>): void;
+};
+export type PopoverOwnProps = {
+    element?: HTMLElement;
+    __demoMode?: boolean;
+};
+export type PopoverProps = Props<typeof DEFAULT_POPOVER_TAG, PopoverRenderPropArg, PopoverOwnProps>;
+import { type MouseEvent } from "./context.svelte.js";
+declare const Popover: import("svelte").Component<PopoverProps, {}, "element">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/popover/PopoverBackdrop.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+  import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
+
+  let DEFAULT_BACKDROP_TAG = "div" as const
+  export type BackdropRenderPropArg = {
+    open: boolean
+  }
+  type BackdropPropsWeControl = "aria-hidden"
+
+  const BackdropRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
+
+  export type PopoverBackdropOwnProps = {
+    element?: HTMLElement
+    id?: string
+    transition?: boolean
+  } & PropsForFeatures<typeof BackdropRenderFeatures>
+
+  export type PopoverBackdropProps = Props<typeof DEFAULT_BACKDROP_TAG, BackdropRenderPropArg, PopoverBackdropOwnProps>
+
+  export type PopoverOverlayProps = PopoverBackdropProps
+</script>
+
+<script lang="ts">
+  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 {
+    element = $bindable(),
+    id = `headlessui-popover-backdrop-${internalId}`,
+    transition = false,
+    ...theirProps
+  }: PopoverBackdropProps = $props()
+  const context = usePopoverContext("PopoverBackdrop")
+  const { popoverState } = $derived(context)
+
+  const usesOpenClosedState = useOpenClosed()
+  const _transition = useTransition({
+    get enabled() {
+      return transition
+    },
+    get element() {
+      return element
+    },
+    get show() {
+      return usesOpenClosedState !== null
+        ? (usesOpenClosedState.value & State.Open) === State.Open
+        : popoverState === PopoverStates.Open
+    },
+  })
+  const { visible, data: transitionData } = $derived(_transition)
+
+  const handleClick = (event: MouseEvent) => {
+    //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
+    context.closePopover()
+  }
+
+  const slot = $derived({
+    open: popoverState === PopoverStates.Open,
+  } satisfies BackdropRenderPropArg)
+
+  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:element
+/>

package/dist/popover/PopoverBackdrop.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Props } from "../utils/types.js";
+import { type PropsForFeatures } from "../utils/render.js";
+declare let DEFAULT_BACKDROP_TAG: "div";
+export type BackdropRenderPropArg = {
+    open: boolean;
+};
+declare const BackdropRenderFeatures: number;
+export type PopoverBackdropOwnProps = {
+    element?: HTMLElement;
+    id?: string;
+    transition?: boolean;
+} & PropsForFeatures<typeof BackdropRenderFeatures>;
+export type PopoverBackdropProps = Props<typeof DEFAULT_BACKDROP_TAG, BackdropRenderPropArg, PopoverBackdropOwnProps>;
+export type PopoverOverlayProps = PopoverBackdropProps;
+declare const PopoverBackdrop: import("svelte").Component<PopoverBackdropProps, {}, "element">;
+type PopoverBackdrop = ReturnType<typeof PopoverBackdrop>;
+export default PopoverBackdrop;