@pzerelles/headlessui-svelte 2.1.2-next.6 → 2.1.2-next.8

package/dist/listbox/ListboxOptions.svelte

@@ -1,351 +1,255 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-  import { mergeProps, RenderFeatures, type PropsForFeatures } from "../utils/render.js"
-  import {
-    useFloatingPanel,
-    useFloatingPanelProps,
-    useResolvedAnchor,
-    type AnchorPropsWithSelection,
-  } from "../internal/floating.svelte.js"
-
-  const DEFAULT_OPTIONS_TAG = "div" as const
-  type OptionsRenderPropArg = {
-    open: boolean
-  }
-  type OptionsPropsWeControl =
-    | "aria-activedescendant"
-    | "aria-labelledby"
-    | "aria-multiselectable"
-    | "aria-orientation"
-    | "role"
-    | "tabIndex"
-
-  let OptionsRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
-
-  export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<
-    TTag,
-    OptionsRenderPropArg,
-    OptionsPropsWeControl,
-    {
-      id?: string
-      anchor?: AnchorPropsWithSelection
-      portal?: boolean
-      modal?: boolean
-      transition?: boolean
-    } & PropsForFeatures<typeof OptionsRenderFeatures>
-  >
-
-  export type ListboxOptionsChildren = Snippet<[OptionsRenderPropArg]>
+<script lang="ts" module>import { mergeProps, RenderFeatures } from "../utils/render.js";
+import {
+  useFloatingPanel,
+  useFloatingPanelProps,
+  useResolvedAnchor
+} from "../internal/floating.svelte.js";
+const DEFAULT_OPTIONS_TAG = "div";
+let OptionsRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG">
-  import { useId } from "../hooks/use-id.js"
-  import { ListboxStates, useActions, useData, ValueMode, type ListboxDataContext } from "./Listbox.svelte"
-  import { getOwnerDocument } from "../utils/owner.js"
-  import { State, useOpenClosed } from "../internal/open-closed.js"
-  import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js"
-  import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js"
-  import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js"
-  import { useInertOthers } from "../hooks/use-inert-others.svelte.js"
-  import { useDidElementMove } from "../hooks/use-did-element-move.svelte.js"
-  import { useFrozenData } from "../internal/frozen.svelte.js"
-  import { useDisposables } from "../utils/disposables.js"
-  import { match } from "../utils/match.js"
-  import { Focus } from "../utils/calculate-active-index.js"
-  import { focusFrom, Focus as FocusManagementFocus } from "../utils/focus-management.js"
-  import { useElementSize } from "../hooks/use-element-size.svelte.js"
-  import { setContext, type Snippet } from "svelte"
-  import Hidden from "../internal/Hidden.svelte"
-  import Portal from "../portal/Portal.svelte"
-  import { stateFromSlot } from "../utils/state.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-
-  const internalId = useId()
-  let {
-    as = DEFAULT_OPTIONS_TAG as TTag,
-    ref = $bindable(),
-    id = `headlessui-listbox-options-${internalId}`,
-    anchor: rawAnchor,
-    portal = false,
-    modal = true,
-    transition = false,
-    static: isStatic = false,
-    unmount = true,
-    ...theirProps
-  }: { as?: TTag } & ListboxOptionsProps<TTag> = $props()
-  const anchor = $derived(useResolvedAnchor(rawAnchor))
-
-  // Always enable `portal` functionality, when `anchor` is enabled
-  $effect(() => {
-    if (anchor) {
-      portal = true
-    }
-  })
-
-  const data = useData("ListboxOptions")
-  const actions = useActions("ListboxOptions")
-
-  const ownerDocument = $derived(getOwnerDocument(data.optionsRef.current))
-
-  const usesOpenClosedState = useOpenClosed()
-  const show = $derived(
-    usesOpenClosedState !== null
-      ? (usesOpenClosedState.value & State.Open) === State.Open
-      : data.listboxState === ListboxStates.Open
-  )
-  const _transition = useTransition({
-    get enabled() {
-      return transition
-    },
-    get element() {
-      return ref
-    },
-    get show() {
-      return show
-    },
-  })
-  const { visible, data: transitionData } = $derived(_transition)
-
-  // Ensure we close the listbox as soon as the button becomes hidden
-  useOnDisappear({
-    get enabled() {
-      return visible
-    },
-    get ref() {
-      return data.buttonRef.current
-    },
-    get ondisappear() {
-      return actions.closeListbox
-    },
-  })
-
-  // Enable scroll locking when the listbox is visible, and `modal` is enabled
-  const scrollLockEnabled = $derived(data.__demoMode ? false : modal && data.listboxState === ListboxStates.Open)
-  useScrollLock({
-    get enabled() {
-      return scrollLockEnabled
-    },
-    get ownerDocument() {
-      return ownerDocument
-    },
-  })
-
-  // Mark other elements as inert when the listbox is visible, and `modal` is enabled
-  const inertOthersEnabled = $derived(data.__demoMode ? false : modal && data.listboxState === ListboxStates.Open)
-  useInertOthers({
-    get enabled() {
-      return inertOthersEnabled
-    },
-    elements: {
-      get allowed() {
-        return [data.buttonRef.current, data.optionsRef.current]
-      },
-    },
-  })
-
-  // We keep track whether the button moved or not, we only check this when the menu state becomes
-  // closed. If the button moved, then we want to cancel pending transitions to prevent that the
-  // attached `MenuItems` is still transitioning while the button moved away.
-  //
-  // If we don't cancel these transitions then there will be a period where the `MenuItems` is
-  // visible and moving around because it is trying to re-position itself based on the new position.
-  //
-  // This can be solved by only transitioning the `opacity` instead of everything, but if you _do_
-  // want to transition the y-axis for example you will run into the same issue again.
-  const didElementMoveEnabled = $derived(data.listboxState !== ListboxStates.Open)
-  const didButtonMove = useDidElementMove({
-    get enabled() {
-      return didElementMoveEnabled
-    },
-    get element() {
-      return data.buttonRef.current
-    },
-  })
-
-  // Now that we know that the button did move or not, we can either disable the panel and all of
-  // its transitions, or rely on the `visible` state to hide the panel whenever necessary.
-  const panelEnabled = $derived(didButtonMove.value ? false : visible)
-
-  // We should freeze when the listbox is visible but "closed". This means that
-  // a transition is currently happening and the component is still visible (for
-  // the transition) but closed from a functionality perspective.
-  const shouldFreeze = $derived(visible && data.listboxState === ListboxStates.Closed)
-
-  // Frozen state, the selected value will only update visually when the user re-opens the <Listbox />
-  const frozenValue = useFrozenData({
-    get freeze() {
-      return shouldFreeze
-    },
-    get data() {
-      return data.value
-    },
-  })
-
-  const isSelected = (compareValue: unknown) => data.compare(frozenValue, compareValue)
-
-  const selectedOptionIndex = () => {
-    if (anchor == null) return null
-    if (!anchor?.to?.includes("selection")) return null
-
-    // Only compute the selected option index when using `selection` in the
-    // `anchor` prop.
-    let idx = data.options.findIndex((option) => isSelected(option.dataRef.current.value))
-    // Ensure that if no data is selected, we default to the first item.
-    if (idx === -1) idx = 0
-    return idx
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG">import { useId } from "../hooks/use-id.js";
+import { ListboxStates, useActions, useData, ValueMode } from "./Listbox.svelte";
+import { getOwnerDocument } from "../utils/owner.js";
+import { State, useOpenClosed } from "../internal/open-closed.js";
+import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js";
+import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js";
+import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js";
+import { useInertOthers } from "../hooks/use-inert-others.svelte.js";
+import { useDidElementMove } from "../hooks/use-did-element-move.svelte.js";
+import { useFrozenData } from "../internal/frozen.svelte.js";
+import { useDisposables } from "../utils/disposables.js";
+import { match } from "../utils/match.js";
+import { Focus } from "../utils/calculate-active-index.js";
+import { focusFrom, Focus as FocusManagementFocus } from "../utils/focus-management.js";
+import { useElementSize } from "../hooks/use-element-size.svelte.js";
+import { setContext } from "svelte";
+import Hidden from "../internal/Hidden.svelte";
+import Portal from "../portal/Portal.svelte";
+import { stateFromSlot } from "../utils/state.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const internalId = useId();
+let {
+  as = DEFAULT_OPTIONS_TAG,
+  ref = $bindable(),
+  id = `headlessui-listbox-options-${internalId}`,
+  anchor: rawAnchor,
+  portal = false,
+  modal = true,
+  transition = false,
+  static: isStatic = false,
+  unmount = true,
+  ...theirProps
+} = $props();
+const anchor = $derived(useResolvedAnchor(rawAnchor));
+$effect(() => {
+  if (anchor) {
+    portal = true;
   }
-
-  const anchorOptions = $derived.by(() => {
-    if (anchor == null) return undefined
-    if (selectedOptionIndex === null) return { ...anchor, inner: undefined }
-
-    let elements = Array.from(data.listRef.current.values())
-
-    return {
-      ...anchor,
-      inner: {
-        listRef: { current: elements },
-        index: selectedOptionIndex,
-      },
+});
+const data = useData("ListboxOptions");
+const actions = useActions("ListboxOptions");
+const ownerDocument = $derived(getOwnerDocument(data.optionsRef.current));
+const usesOpenClosedState = useOpenClosed();
+const show = $derived(
+  usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Open) === State.Open : data.listboxState === ListboxStates.Open
+);
+const _transition = useTransition({
+  get enabled() {
+    return transition;
+  },
+  get element() {
+    return ref;
+  },
+  get show() {
+    return show;
+  }
+});
+const { visible, data: transitionData } = $derived(_transition);
+useOnDisappear({
+  get enabled() {
+    return visible;
+  },
+  get ref() {
+    return data.buttonRef.current;
+  },
+  get ondisappear() {
+    return actions.closeListbox;
+  }
+});
+const scrollLockEnabled = $derived(data.__demoMode ? false : modal && data.listboxState === ListboxStates.Open);
+useScrollLock({
+  get enabled() {
+    return scrollLockEnabled;
+  },
+  get ownerDocument() {
+    return ownerDocument;
+  }
+});
+const inertOthersEnabled = $derived(data.__demoMode ? false : modal && data.listboxState === ListboxStates.Open);
+useInertOthers({
+  get enabled() {
+    return inertOthersEnabled;
+  },
+  elements: {
+    get allowed() {
+      return [data.buttonRef.current, data.optionsRef.current];
     }
-  })
-
-  const floatingPanel = useFloatingPanel({
-    get placement() {
-      return anchorOptions ?? null
-    },
-  })
-  const { setFloating, style } = $derived(floatingPanel)
-  const getFloatingPanelProps = useFloatingPanelProps()
-
-  $effect(() => {
-    data.optionsRef.current = ref || null
-    if (anchor) setFloating(ref)
-  })
-
-  const searchDisposables = useDisposables()
-
-  const { listboxState, optionsRef } = $derived(data)
-  $effect(() => {
-    let container = optionsRef.current
-    if (!container) return
-    if (listboxState !== ListboxStates.Open) return
-    if (container === getOwnerDocument(container)?.activeElement) return
-
-    container?.focus({ preventScroll: true })
-  })
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    searchDisposables.dispose()
-
-    switch (event.key) {
-      // Ref: https://www.w3.org/WAI/ARIA/apg/patterns/menu/#keyboard-interaction-12
-
-      case " ":
-        if (data.searchQuery !== "") {
-          event.preventDefault()
-          event.stopPropagation()
-          return actions.search(event.key)
-        }
-      // When in type ahead mode, fallthrough
-      case "Enter":
-        event.preventDefault()
-        event.stopPropagation()
-
-        if (data.activeOptionIndex !== null) {
-          let { dataRef } = data.options[data.activeOptionIndex]
-          actions.onChange(dataRef.current.value)
-        }
-        if (data.mode === ValueMode.Single) {
-          actions.closeListbox()
-          data.buttonRef.current?.focus({ preventScroll: true })
-        }
-        break
-
-      case match(data.orientation, { vertical: "ArrowDown", horizontal: "ArrowRight" }):
-        event.preventDefault()
-        event.stopPropagation()
-        return actions.goToOption(Focus.Next)
-
-      case match(data.orientation, { vertical: "ArrowUp", horizontal: "ArrowLeft" }):
-        event.preventDefault()
-        event.stopPropagation()
-        return actions.goToOption(Focus.Previous)
-
-      case "Home":
-      case "PageUp":
-        event.preventDefault()
-        event.stopPropagation()
-        return actions.goToOption(Focus.First)
-
-      case "End":
-      case "PageDown":
-        event.preventDefault()
-        event.stopPropagation()
-        return actions.goToOption(Focus.Last)
-
-      case "Escape":
-        event.preventDefault()
-        event.stopPropagation()
-        actions.closeListbox()
-        data.buttonRef.current?.focus({ preventScroll: true })
-        return
-
-      case "Tab":
-        event.preventDefault()
-        event.stopPropagation()
-        actions.closeListbox()
-        focusFrom(data.buttonRef.current!, event.shiftKey ? FocusManagementFocus.Previous : FocusManagementFocus.Next)
-        break
-
-      default:
-        if (event.key.length === 1) {
-          actions.search(event.key)
-          searchDisposables.setTimeout(() => actions.clearSearch(), 350)
-        }
-        break
+  }
+});
+const didElementMoveEnabled = $derived(data.listboxState !== ListboxStates.Open);
+const didButtonMove = useDidElementMove({
+  get enabled() {
+    return didElementMoveEnabled;
+  },
+  get element() {
+    return data.buttonRef.current;
+  }
+});
+const panelEnabled = $derived(didButtonMove.value ? false : visible);
+const shouldFreeze = $derived(visible && data.listboxState === ListboxStates.Closed);
+const frozenValue = useFrozenData({
+  get freeze() {
+    return shouldFreeze;
+  },
+  get data() {
+    return data.value;
+  }
+});
+const isSelected = (compareValue) => data.compare(frozenValue, compareValue);
+const selectedOptionIndex = () => {
+  if (anchor == null) return null;
+  if (!anchor?.to?.includes("selection")) return null;
+  let idx = data.options.findIndex((option) => isSelected(option.dataRef.current.value));
+  if (idx === -1) idx = 0;
+  return idx;
+};
+const anchorOptions = $derived.by(() => {
+  if (anchor == null) return void 0;
+  if (selectedOptionIndex === null) return { ...anchor, inner: void 0 };
+  let elements = Array.from(data.listRef.current.values());
+  return {
+    ...anchor,
+    inner: {
+      listRef: { current: elements },
+      index: selectedOptionIndex
     }
+  };
+});
+const floatingPanel = useFloatingPanel({
+  get placement() {
+    return anchorOptions ?? null;
   }
-
-  const labelledby = $derived(data.buttonRef.current?.id)
-  const slot = $derived({
-    open: data.listboxState === ListboxStates.Open,
-  } satisfies OptionsRenderPropArg)
-
-  const buttonSize = useElementSize({
-    get element() {
-      return data.buttonRef.current
-    },
-    unit: true,
+});
+const { setFloating, style } = $derived(floatingPanel);
+const getFloatingPanelProps = useFloatingPanelProps();
+$effect(() => {
+  data.optionsRef.current = ref || null;
+  if (anchor) setFloating(ref);
+});
+const searchDisposables = useDisposables();
+const { listboxState, optionsRef } = $derived(data);
+$effect(() => {
+  let container = optionsRef.current;
+  if (!container) return;
+  if (listboxState !== ListboxStates.Open) return;
+  if (container === getOwnerDocument(container)?.activeElement) return;
+  container?.focus({ preventScroll: true });
+});
+const handleKeyDown = (event) => {
+  searchDisposables.dispose();
+  switch (event.key) {
+    case " ":
+      if (data.searchQuery !== "") {
+        event.preventDefault();
+        event.stopPropagation();
+        return actions.search(event.key);
+      }
+    case "Enter":
+      event.preventDefault();
+      event.stopPropagation();
+      if (data.activeOptionIndex !== null) {
+        let { dataRef } = data.options[data.activeOptionIndex];
+        actions.onChange(dataRef.current.value);
+      }
+      if (data.mode === ValueMode.Single) {
+        actions.closeListbox();
+        data.buttonRef.current?.focus({ preventScroll: true });
+      }
+      break;
+    case match(data.orientation, { vertical: "ArrowDown", horizontal: "ArrowRight" }):
+      event.preventDefault();
+      event.stopPropagation();
+      return actions.goToOption(Focus.Next);
+    case match(data.orientation, { vertical: "ArrowUp", horizontal: "ArrowLeft" }):
+      event.preventDefault();
+      event.stopPropagation();
+      return actions.goToOption(Focus.Previous);
+    case "Home":
+    case "PageUp":
+      event.preventDefault();
+      event.stopPropagation();
+      return actions.goToOption(Focus.First);
+    case "End":
+    case "PageDown":
+      event.preventDefault();
+      event.stopPropagation();
+      return actions.goToOption(Focus.Last);
+    case "Escape":
+      event.preventDefault();
+      event.stopPropagation();
+      actions.closeListbox();
+      data.buttonRef.current?.focus({ preventScroll: true });
+      return;
+    case "Tab":
+      event.preventDefault();
+      event.stopPropagation();
+      actions.closeListbox();
+      focusFrom(data.buttonRef.current, event.shiftKey ? FocusManagementFocus.Previous : FocusManagementFocus.Next);
+      break;
+    default:
+      if (event.key.length === 1) {
+        actions.search(event.key);
+        searchDisposables.setTimeout(() => actions.clearSearch(), 350);
+      }
+      break;
+  }
+};
+const labelledby = $derived(data.buttonRef.current?.id);
+const slot = $derived({
+  open: data.listboxState === ListboxStates.Open
+});
+const buttonSize = useElementSize({
+  get element() {
+    return data.buttonRef.current;
+  },
+  unit: true
+});
+const ourProps = $derived(
+  mergeProps(anchor ? getFloatingPanelProps() : {}, {
+    id,
+    "aria-activedescendant": data.activeOptionIndex === null ? void 0 : data.options[data.activeOptionIndex]?.id,
+    "aria-multiselectable": data.mode === ValueMode.Multi ? true : void 0,
+    "aria-labelledby": labelledby,
+    "aria-orientation": data.orientation,
+    onkeydown: handleKeyDown,
+    role: "listbox",
+    // When the `Listbox` is closed, it should not be focusable. This allows us
+    // to skip focusing the `ListboxOptions` when pressing the tab key on an
+    // open `Listbox`, and go to the next focusable element.
+    tabIndex: data.listboxState === ListboxStates.Open ? 0 : void 0,
+    style: [theirProps.style, style, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
+    ...transitionDataAttributes(transitionData),
+    ...stateFromSlot(slot)
   })
-
-  const ourProps = $derived(
-    mergeProps(anchor ? getFloatingPanelProps() : {}, {
-      id,
-      "aria-activedescendant": data.activeOptionIndex === null ? undefined : data.options[data.activeOptionIndex]?.id,
-      "aria-multiselectable": data.mode === ValueMode.Multi ? true : undefined,
-      "aria-labelledby": labelledby,
-      "aria-orientation": data.orientation,
-      onkeydown: handleKeyDown,
-      role: "listbox",
-      // When the `Listbox` is closed, it should not be focusable. This allows us
-      // to skip focusing the `ListboxOptions` when pressing the tab key on an
-      // open `Listbox`, and go to the next focusable element.
-      tabIndex: data.listboxState === ListboxStates.Open ? 0 : undefined,
-      style: [theirProps.style, style, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
-      ...transitionDataAttributes(transitionData),
-      ...stateFromSlot(slot),
-    })
-  )
-
-  const derivedData: ListboxDataContext = {
-    ...data,
-    get isSelected() {
-      return data.mode === ValueMode.Multi ? data.isSelected : isSelected
-    },
+);
+const derivedData = {
+  ...data,
+  get isSelected() {
+    return data.mode === ValueMode.Multi ? data.isSelected : isSelected;
   }
-
-  setContext("ListboxDataContext", derivedData)
+};
+setContext("ListboxDataContext", derivedData);
 </script>
 
 <Portal enabled={portal ? isStatic || visible : false}>

package/dist/listbox/ListboxSelectedOption.svelte

@@ -1,43 +1,20 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-  import type { Component } from "svelte"
-
-  const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment"
-  type SelectedOptionRenderPropArg = {}
-  type SelectedOptionPropsWeControl = never
-
-  export type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<
-    TTag,
-    SelectedOptionRenderPropArg,
-    SelectedOptionPropsWeControl,
-    {
-      options: Component<any, any>
-      placeholder?: Component<any, any>
-    }
-  >
+<script lang="ts" module>const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG">
-  import { useData, ValueMode } from "./Listbox.svelte"
-  import { setContext } from "svelte"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-
-  let {
-    ref = $bindable(),
-    options,
-    placeholder,
-    ...theirProps
-  }: { as?: TTag } & ListboxSelectedOptionProps<TTag> = $props()
-
-  const data = useData("ListboxSelectedOption")
-
-  const shouldShowPlaceholder = $derived(
-    data.value === undefined ||
-      data.value === null ||
-      (data.mode === ValueMode.Multi && Array.isArray(data.value) && data.value.length === 0)
-  )
-
-  setContext("SelectedOptionContext", true)
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG">import { useData, ValueMode } from "./Listbox.svelte";
+import { setContext } from "svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+let {
+  ref = $bindable(),
+  options,
+  placeholder,
+  ...theirProps
+} = $props();
+const data = useData("ListboxSelectedOption");
+const shouldShowPlaceholder = $derived(
+  data.value === void 0 || data.value === null || data.mode === ValueMode.Multi && Array.isArray(data.value) && data.value.length === 0
+);
+setContext("SelectedOptionContext", true);
 </script>
 
 {#snippet children()}