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

package/dist/menu/Menu.svelte

@@ -1,235 +1,324 @@
-<script lang="ts" module>import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
-import { createFloatingContext } from "../internal/floating.svelte.js";
-import { createOpenClosedContext, State } from "../internal/open-closed.js";
-import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { FocusableMode, isFocusableElement, sortByDomNode } from "../utils/focus-management.js";
-import { match } from "../utils/match.js";
-let DEFAULT_MENU_TAG = "svelte:fragment";
+<script lang="ts" module>
+  import { useOutsideClick } from "../hooks/use-outside-click.svelte.js"
+  import { createFloatingContext } from "../internal/floating.svelte.js"
+  import { createOpenClosedContext, State } from "../internal/open-closed.js"
+  import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { FocusableMode, isFocusableElement, sortByDomNode } 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
+    }
+  >
+
+  export type MenuChildren<T> = Snippet<[MenuRenderPropArg]>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_MENU_TAG">import { setContext } from "svelte";
-import {
-  ActivationTrigger,
-  MenuStates
-} from "./context.svelte.js";
-function adjustOrderedState(state, adjustment = (i) => i) {
-  let currentActiveItem = state.activeItemIndex !== null ? state.items[state.activeItemIndex] : null;
-  let sortedItems = sortByDomNode(adjustment(state.items.slice()), (item) => item.dataRef.current.domRef.current);
-  let adjustedActiveItemIndex = currentActiveItem ? sortedItems.indexOf(currentActiveItem) : null;
-  if (adjustedActiveItemIndex === -1) {
-    adjustedActiveItemIndex = null;
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_MENU_TAG">
+  import { setContext } from "svelte"
+  import {
+    ActivationTrigger,
+    MenuStates,
+    type MenuContext,
+    type MenuItemDataRef,
+    type StateDefinition,
+  } from "./context.svelte.js"
+
+  function adjustOrderedState(
+    state: StateDefinition,
+    adjustment: (items: StateDefinition["items"]) => StateDefinition["items"] = (i) => i
+  ) {
+    let currentActiveItem = state.activeItemIndex !== null ? state.items[state.activeItemIndex] : null
+
+    let 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,
+    }
   }
-  return {
-    items: sortedItems,
-    activeItemIndex: adjustedActiveItemIndex
-  };
-}
-const stateReducer = (initialState) => {
-  let _state2 = $state(initialState);
-  return {
-    get menuState() {
-      return _state2.menuState;
-    },
-    get buttonElement() {
-      return _state2.buttonElement;
-    },
-    get itemsElement() {
-      return _state2.itemsElement;
-    },
-    get items() {
-      return _state2.items;
-    },
-    get searchQuery() {
-      return _state2.searchQuery;
-    },
-    get activeItemIndex() {
-      return _state2.activeItemIndex;
-    },
-    get activationTrigger() {
-      return _state2.activationTrigger;
-    },
-    get __demoMode() {
-      return _state2.__demoMode;
-    },
-    closeMenu() {
-      if (_state2.menuState === MenuStates.Closed) return _state2;
-      _state2.activeItemIndex = null;
-      _state2.menuState = MenuStates.Closed;
-      return _state2;
-    },
-    openMenu() {
-      if (_state2.menuState === MenuStates.Open) return _state2;
-      _state2.__demoMode = false;
-      _state2.menuState = MenuStates.Open;
-      return _state2;
-    },
-    goToItem(action) {
-      if (_state2.menuState === MenuStates.Closed) return _state2;
-      _state2.searchQuery = "";
-      _state2.activationTrigger = action.trigger ?? ActivationTrigger.Other;
-      _state2.__demoMode = false;
-      if (action.focus === Focus.Nothing) {
-        _state2.activeItemIndex = null;
-        return _state2;
-      }
-      if (action.focus === Focus.Specific) {
-        _state2.activeItemIndex = _state2.items.findIndex((o) => o.id === action.id);
-        return _state2;
-      } else if (action.focus === Focus.Previous) {
-        let activeItemIdx = _state2.activeItemIndex;
-        if (activeItemIdx !== null) {
-          let currentDom = _state2.items[activeItemIdx].dataRef.current.domRef;
-          let previousItemIndex = calculateActiveIndex(action, {
-            resolveItems: () => _state2.items,
-            resolveActiveIndex: () => _state2.activeItemIndex,
-            resolveId: (item) => item.id,
-            resolveDisabled: (item) => item.dataRef.current.disabled
-          });
-          if (previousItemIndex !== null) {
-            let previousDom = _state2.items[previousItemIndex].dataRef.current.domRef;
-            if (
-              // Next to each other
-              currentDom.current?.previousElementSibling === previousDom.current || // Or already the first element
-              previousDom.current?.previousElementSibling === null
-            ) {
-              _state2.activeItemIndex = previousItemIndex;
-              return _state2;
+
+  const stateReducer = (initialState: StateDefinition) => {
+    let _state = $state(initialState)
+    return {
+      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:
+          | { focus: Focus.Specific; id: string; trigger?: ActivationTrigger }
+          | { focus: Exclude<Focus, Focus.Specific>; trigger?: ActivationTrigger }
+      ) {
+        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) {
+          let activeItemIdx = _state.activeItemIndex
+          if (activeItemIdx !== null) {
+            let currentDom = _state.items[activeItemIdx].dataRef.current.domRef
+            let previousItemIndex = calculateActiveIndex(action, {
+              resolveItems: () => _state.items,
+              resolveActiveIndex: () => _state.activeItemIndex,
+              resolveId: (item) => item.id,
+              resolveDisabled: (item) => item.dataRef.current.disabled,
+            })
+            if (previousItemIndex !== null) {
+              let 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
+              }
             }
           }
         }
-      } else if (action.focus === Focus.Next) {
-        let activeItemIdx = _state2.activeItemIndex;
-        if (activeItemIdx !== null) {
-          let currentDom = _state2.items[activeItemIdx].dataRef.current.domRef;
-          let nextItemIndex = calculateActiveIndex(action, {
-            resolveItems: () => _state2.items,
-            resolveActiveIndex: () => _state2.activeItemIndex,
-            resolveId: (item) => item.id,
-            resolveDisabled: (item) => item.dataRef.current.disabled
-          });
-          if (nextItemIndex !== null) {
-            let nextDom = _state2.items[nextItemIndex].dataRef.current.domRef;
-            if (
-              // Next to each other
-              currentDom.current?.nextElementSibling === nextDom.current || // Or already the last element
-              nextDom.current?.nextElementSibling === null
-            ) {
-              _state2.activeItemIndex = nextItemIndex;
-              return _state2;
+
+        // 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) {
+          let activeItemIdx = _state.activeItemIndex
+          if (activeItemIdx !== null) {
+            let currentDom = _state.items[activeItemIdx].dataRef.current.domRef
+            let nextItemIndex = calculateActiveIndex(action, {
+              resolveItems: () => _state.items,
+              resolveActiveIndex: () => _state.activeItemIndex,
+              resolveId: (item) => item.id,
+              resolveDisabled: (item) => item.dataRef.current.disabled,
+            })
+            if (nextItemIndex !== null) {
+              let 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
+              }
             }
           }
         }
-      }
-      let adjustedState = adjustOrderedState(_state2);
-      let activeItemIndex = calculateActiveIndex(action, {
-        resolveItems: () => adjustedState.items,
-        resolveActiveIndex: () => adjustedState.activeItemIndex,
-        resolveId: (item) => item.id,
-        resolveDisabled: (item) => item.dataRef.current.disabled
-      });
-      _state2.items = adjustedState.items;
-      _state2.activeItemIndex = activeItemIndex;
-      return _state2;
-    },
-    search(value) {
-      let wasAlreadySearching = _state2.searchQuery !== "";
-      let offset = wasAlreadySearching ? 0 : 1;
-      let searchQuery = _state2.searchQuery + value.toLowerCase();
-      let reOrderedItems = _state2.activeItemIndex !== null ? _state2.items.slice(_state2.activeItemIndex + offset).concat(_state2.items.slice(0, _state2.activeItemIndex + offset)) : _state2.items;
-      let matchingItem = reOrderedItems.find(
-        (item) => item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled
-      );
-      let matchIdx = matchingItem ? _state2.items.indexOf(matchingItem) : -1;
-      if (matchIdx === -1 || matchIdx === _state2.activeItemIndex) {
-        _state2.searchQuery = searchQuery;
-        return _state2;
-      }
-      _state2.searchQuery = searchQuery;
-      _state2.activeItemIndex = matchIdx;
-      _state2.activationTrigger = ActivationTrigger.Other;
-      return _state2;
-    },
-    clearSearch() {
-      if (_state2.searchQuery === "") return _state2;
-      _state2.searchQuery = "";
-      return _state2;
+
+        // Slow path:
+        //
+        // Ensure all the items are correctly sorted according to DOM position
+        let adjustedState = adjustOrderedState(_state)
+        let 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: string) {
+        let wasAlreadySearching = _state.searchQuery !== ""
+        let offset = wasAlreadySearching ? 0 : 1
+        let searchQuery = _state.searchQuery + value.toLowerCase()
+
+        let reOrderedItems =
+          _state.activeItemIndex !== null
+            ? _state.items
+                .slice(_state.activeItemIndex + offset)
+                .concat(_state.items.slice(0, _state.activeItemIndex + offset))
+            : _state.items
+
+        let matchingItem = reOrderedItems.find(
+          (item) => item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled
+        )
+
+        let 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: string, dataRef: MenuItemDataRef) {
+        let item = { id, dataRef }
+        let adjustedState = adjustOrderedState(_state, (items) => [...items, item])
+
+        _state.items = adjustedState.items
+        _state.activeItemIndex = adjustedState.activeItemIndex
+        return _state
+      },
+      unregisterItem(id: string) {
+        let adjustedState = adjustOrderedState(_state, (items) => {
+          let 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: HTMLButtonElement | null) {
+        if (_state.buttonElement === element) return _state
+        _state.buttonElement = element
+        return _state
+      },
+      setItemsElement(element: HTMLElement | null) {
+        if (_state.itemsElement === element) return _state
+        _state.itemsElement = element
+        return _state
+      },
+    }
+  }
+
+  let { ref = $bindable(), __demoMode = false, ...theirProps }: { as?: TTag } & MenuProps<TTag> = $props()
+
+  const _state = stateReducer({
+    __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(_state)
+  setContext<MenuContext>("MenuContext", _state)
+
+  // Handle outside click
+  const outsideClickEnabled = $derived(menuState === MenuStates.Open)
+  useOutsideClick({
+    get enabled() {
+      return outsideClickEnabled
     },
-    registerItem(id, dataRef) {
-      let item = { id, dataRef };
-      let adjustedState = adjustOrderedState(_state2, (items) => [...items, item]);
-      _state2.items = adjustedState.items;
-      _state2.activeItemIndex = adjustedState.activeItemIndex;
-      return _state2;
+    get containers() {
+      return [buttonElement, itemsElement]
     },
-    unregisterItem(id) {
-      let adjustedState = adjustOrderedState(_state2, (items) => {
-        let idx = items.findIndex((a) => a.id === id);
-        if (idx !== -1) items.splice(idx, 1);
-        return items;
-      });
-      _state2.items = adjustedState.items;
-      _state2.activeItemIndex = adjustedState.activeItemIndex;
-      _state2.activationTrigger = ActivationTrigger.Other;
-      return _state2;
+    cb: (event, target) => {
+      _state.closeMenu()
+
+      if (!isFocusableElement(target, FocusableMode.Loose)) {
+        event.preventDefault()
+        buttonElement?.focus()
+      }
     },
-    setButtonElement(element) {
-      if (_state2.buttonElement === element) return _state2;
-      _state2.buttonElement = element;
-      return _state2;
+  })
+
+  const slot = $derived({
+    open: _state.menuState === MenuStates.Open,
+    close: _state.closeMenu,
+  } satisfies MenuRenderPropArg)
+
+  createFloatingContext()
+
+  const openClosed = $derived(
+    match(menuState, {
+      [MenuStates.Open]: State.Open,
+      [MenuStates.Closed]: State.Closed,
+    })
+  )
+  createOpenClosedContext({
+    get value() {
+      return openClosed
     },
-    setItemsElement(element) {
-      if (_state2.itemsElement === element) return _state2;
-      _state2.itemsElement = element;
-      return _state2;
-    }
-  };
-};
-let { ref = $bindable(), __demoMode = false, ...theirProps } = $props();
-const _state = stateReducer({
-  __demoMode,
-  menuState: __demoMode ? MenuStates.Open : MenuStates.Closed,
-  buttonElement: null,
-  itemsElement: null,
-  items: [],
-  searchQuery: "",
-  activeItemIndex: null,
-  activationTrigger: ActivationTrigger.Other
-});
-const { menuState, itemsElement, buttonElement } = $derived(_state);
-setContext("MenuContext", _state);
-const outsideClickEnabled = $derived(menuState === MenuStates.Open);
-useOutsideClick({
-  get enabled() {
-    return outsideClickEnabled;
-  },
-  get containers() {
-    return [buttonElement, itemsElement];
-  },
-  cb: (event, target) => {
-    _state.closeMenu();
-    if (!isFocusableElement(target, FocusableMode.Loose)) {
-      event.preventDefault();
-      buttonElement?.focus();
-    }
-  }
-});
-const slot = $derived({
-  open: _state.menuState === MenuStates.Open,
-  close: _state.closeMenu
-});
-createFloatingContext();
-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 />