@pzerelles/headlessui-svelte 2.1.2-next.7 → 2.1.2-next.9

package/dist/menu/Menu.svelte

@@ -1,324 +1,235 @@
-<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 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>
 
-<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,
-    }
+<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;
   }
-
-  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
-              }
+  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;
             }
           }
         }
-
-        // 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
-              }
+      } 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;
             }
           }
         }
-
-        // 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
-    },
-    get containers() {
-      return [buttonElement, itemsElement]
+      }
+      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;
     },
-    cb: (event, target) => {
-      _state.closeMenu()
-
-      if (!isFocusableElement(target, FocusableMode.Loose)) {
-        event.preventDefault()
-        buttonElement?.focus()
+    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;
     },
-  })
-
-  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
+    clearSearch() {
+      if (_state2.searchQuery === "") return _state2;
+      _state2.searchQuery = "";
+      return _state2;
     },
+    registerItem(id, dataRef) {
+      let item = { id, dataRef };
+      let adjustedState = adjustOrderedState(_state2, (items) => [...items, item]);
+      _state2.items = adjustedState.items;
+      _state2.activeItemIndex = adjustedState.activeItemIndex;
+      return _state2;
+    },
+    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;
+    },
+    setButtonElement(element) {
+      if (_state2.buttonElement === element) return _state2;
+      _state2.buttonElement = element;
+      return _state2;
+    },
+    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 />