@pzerelles/headlessui-svelte 2.1.2-next.29 → 2.1.2-next.30

package/dist/description/Description.svelte

@@ -1,36 +1,26 @@
-<script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-
-  let DEFAULT_DESCRIPTION_TAG = "p" as const
-
-  export type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = Props<TTag>
+<script lang="ts" module>let DEFAULT_DESCRIPTION_TAG = "p";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">
-  import { useId } from "../hooks/use-id.js"
-  import { useDisabled } from "../hooks/use-disabled.js"
-  import { useDescriptionContext } from "./context.svelte.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { untrack } from "svelte"
-
-  const internalId = useId()
-  const providedDisabled = useDisabled()
-
-  let {
-    ref = $bindable(),
-    id = `headlessui-description-${internalId}` as PropsOf<TTag>["id"],
-    ...theirProps
-  }: { as?: TTag } & DescriptionProps<TTag> = $props()
-
-  const { register } = useDescriptionContext()
-  $effect(() => {
-    id
-    return untrack(() => register(id))
-  })
-
-  const disabled = $derived(providedDisabled.current || false)
-  const slot = $derived({ disabled })
-  const ourProps = $derived({ id })
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">import { useId } from "../hooks/use-id.js";
+import { useDisabled } from "../hooks/use-disabled.js";
+import { useDescriptionContext } from "./context.svelte.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { untrack } from "svelte";
+const internalId = useId();
+const providedDisabled = useDisabled();
+let {
+  ref = $bindable(),
+  id = `headlessui-description-${internalId}`,
+  ...theirProps
+} = $props();
+const { register } = useDescriptionContext();
+$effect(() => {
+  id;
+  return untrack(() => register(id));
+});
+const disabled = $derived(providedDisabled.current || false);
+const slot = $derived({ disabled });
+const ourProps = $derived({ id });
 </script>
 
 <ElementOrComponent

package/dist/dialog/Dialog.svelte

@@ -1,331 +1,239 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-  import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
-
-  export const DEFAULT_DIALOG_TAG = "div" as const
-  export type DialogRenderPropArg = {
-    open: boolean
-  }
-  type DialogPropsWeControl = "aria-describedby" | "aria-labelledby" | "aria-modal"
-
-  export const DialogRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
-
-  export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = Props<
-    TTag,
-    DialogRenderPropArg,
-    DialogPropsWeControl,
-    PropsForFeatures<typeof DialogRenderFeatures> & {
-      as?: TTag
-      id?: string
-      open?: boolean
-      onclose(value: boolean): void
-      initialFocus?: HTMLElement
-      role?: "dialog" | "alertdialog"
-      autofocus?: boolean
-      transition?: boolean
-      __demoMode?: boolean
-    }
-  >
+<script lang="ts" module>import { RenderFeatures } from "../utils/render.js";
+export const DEFAULT_DIALOG_TAG = "div";
+export const DialogRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">
-  import { useId } from "../hooks/use-id.js"
-  import { useMainTreeNode, useRootContainers } from "../hooks/use-root-containers.svelte.js"
-  import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js"
-  import { useNestedPortals } from "../portal/InternalPortal.svelte"
-  import { getOwnerDocument } from "../utils/owner.js"
-  import { useInertOthers } from "../hooks/use-inert-others.svelte.js"
-  import { useOutsideClick } from "../hooks/use-outside-click.svelte.js"
-  import { useEscape } from "../hooks/use-escape.svelte.js"
-  import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js"
-  import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js"
-  import { setContext } from "svelte"
-  import { useIsTouchDevice } from "../hooks/use-is-touch-device.svelte.js"
-  import FocusTrap, { FocusTrapFeatures } from "../focus-trap/FocusTrap.svelte"
-  import Portal from "../portal/Portal.svelte"
-  import PortalGroup from "../portal/PortalGroup.svelte"
-  import ForcePortalRoot from "../internal/ForcePortalRoot.svelte"
-  import { createCloseContext } from "../internal/close-provider.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { DialogStates, type DialogContext, type StateDefinition } from "./context.svelte.js"
-  import { useDescriptions } from "../description/context.svelte.js"
-  import MainTreeProvider from "../internal/MainTreeProvider.svelte"
-  import Transition from "../transition/Transition.svelte"
-
-  const internalId = useId()
-  let {
-    ref = $bindable(),
-    id = `headlessui-dialog-${internalId}`,
-    open: theirOpen,
-    onclose,
-    initialFocus,
-    role: theirRole = "dialog",
-    autofocus = true,
-    __demoMode = false,
-    unmount = false,
-    transition = false,
-    ...theirProps
-  }: { as?: TTag } & DialogProps<TTag> = $props()
-
-  // Validations
-  const usesOpenClosedState = useOpenClosed()
-  const hasOpen = $derived(theirOpen !== undefined || usesOpenClosedState)
-  const hasOnClose = $derived(theirProps.hasOwnProperty("onclose"))
-
-  $effect(() => {
-    if (!hasOpen && !hasOnClose) {
-      throw new Error(`You have to provide an \`open\` and an \`onclose\` prop to the \`Dialog\` component.`)
-    }
-
-    if (!hasOpen) {
-      throw new Error(`You provided an \`onclose\` prop to the \`Dialog\`, but forgot an \`open\` prop.`)
-    }
-
-    if (!hasOnClose) {
-      throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but forgot an \`onclose\` prop.`)
-    }
-
-    if (!usesOpenClosedState && typeof open !== "boolean") {
-      throw new Error(
-        `You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${open}`
-      )
-    }
-
-    if (typeof theirProps.onclose !== "function") {
-      throw new Error(
-        `You provided an \`onclose\` prop to the \`Dialog\`, but the value is not a function. Received: ${theirProps.onclose}`
-      )
-    }
-  })
-
-  let didWarnOnRole = $state(false)
-
-  const role = $derived.by(() => {
-    if (theirRole === "dialog" || theirRole === "alertdialog") {
-      return theirRole
-    }
-
-    if (!didWarnOnRole) {
-      didWarnOnRole = true
-      console.warn(
-        `Invalid role [${theirRole}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`
-      )
-    }
-
-    return "dialog"
-  })
-
-  // Update the `open` prop based on the open closed state
-  const open = $derived(
-    theirOpen === undefined && usesOpenClosedState !== null
-      ? (usesOpenClosedState.value & State.Open) === State.Open
-      : theirOpen
-  )
-
-  const ownerDocument = $derived(getOwnerDocument(ref))
-
-  const dialogState = $derived(open ? DialogStates.Open : DialogStates.Closed)
-
-  let _state = $state({
-    titleId: null,
-    panelRef: null,
-  } as StateDefinition)
-
-  const close = $derived(() => onclose(false))
-
-  const setTitleId = (id: string | null) => (_state.titleId = id)
-
-  const enabled = $derived(dialogState === DialogStates.Open)
-  const nestedPortals = useNestedPortals()
-  const { portals } = $derived(nestedPortals)
-
-  // We use this because reading these values during initial render(s)
-  // can result in `null` rather then the actual elements
-  // This doesn't happen when using certain components like a
-  // `<Dialog.Title>` because they cause the parent to re-render
-  const defaultContainer: { readonly current: HTMLElement | undefined } = {
-    get current() {
-      return _state.panelRef ?? ref
-    },
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">import { useId } from "../hooks/use-id.js";
+import { useMainTreeNode, useRootContainers } from "../hooks/use-root-containers.svelte.js";
+import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js";
+import { useNestedPortals } from "../portal/InternalPortal.svelte";
+import { getOwnerDocument } from "../utils/owner.js";
+import { useInertOthers } from "../hooks/use-inert-others.svelte.js";
+import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
+import { useEscape } from "../hooks/use-escape.svelte.js";
+import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js";
+import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js";
+import { setContext } from "svelte";
+import { useIsTouchDevice } from "../hooks/use-is-touch-device.svelte.js";
+import FocusTrap, { FocusTrapFeatures } from "../focus-trap/FocusTrap.svelte";
+import Portal from "../portal/Portal.svelte";
+import PortalGroup from "../portal/PortalGroup.svelte";
+import ForcePortalRoot from "../internal/ForcePortalRoot.svelte";
+import { createCloseContext } from "../internal/close-provider.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { DialogStates } from "./context.svelte.js";
+import { useDescriptions } from "../description/context.svelte.js";
+import MainTreeProvider from "../internal/MainTreeProvider.svelte";
+import Transition from "../transition/Transition.svelte";
+const internalId = useId();
+let {
+  ref = $bindable(),
+  id = `headlessui-dialog-${internalId}`,
+  open: theirOpen,
+  onclose,
+  initialFocus,
+  role: theirRole = "dialog",
+  autofocus = true,
+  __demoMode = false,
+  unmount = false,
+  transition = false,
+  ...theirProps
+} = $props();
+const usesOpenClosedState = useOpenClosed();
+const hasOpen = $derived(theirOpen !== void 0 || usesOpenClosedState);
+const hasOnClose = $derived(theirProps.hasOwnProperty("onclose"));
+$effect(() => {
+  if (!hasOpen && !hasOnClose) {
+    throw new Error(`You have to provide an \`open\` and an \`onclose\` prop to the \`Dialog\` component.`);
   }
-
-  const mainTreeNode = useMainTreeNode()
-  let { resolvedContainers: resolvedRootContainers } = $derived(
-    useRootContainers({
-      get mainTreeNode() {
-        return mainTreeNode.node
-      },
-      get portals() {
-        return portals
-      },
-      get defaultContainers() {
-        return defaultContainer.current ? [defaultContainer.current] : []
-      },
-    })
-  )
-
-  // When the `Dialog` is wrapped in a `Transition` (or another Headless UI component that exposes
-  // the OpenClosed state) then we get some information via context about its state. When the
-  // `Transition` is about to close, then the `State.Closing` state will be exposed. This allows us
-  // to enable/disable certain functionality in the `Dialog` upfront instead of waiting until the
-  // `Transition` is done transitioning.
-  const isClosing = $derived(
-    usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Closing) === State.Closing : false
-  )
-
-  // Ensure other elements can't be interacted with
-  const inertOthersEnabled = $derived(__demoMode ? false : isClosing ? false : enabled)
-  useInertOthers({
-    get enabled() {
-      return inertOthersEnabled
-    },
-    elements: {
-      get allowed() {
-        return [
-          // Allow the headlessui-portal of the Dialog to be interactive. This
-          // contains the current dialog and the necessary focus guard elements.
-          ref?.closest<HTMLElement>("[data-headlessui-portal]") ?? null,
-        ]
-      },
-      get disallowed() {
-        return [
-          // Disallow the "main" tree root node
-          mainTreeNode.node?.closest<HTMLElement>("body > *:not(#headlessui-portal-root)") ?? null,
-        ]
-      },
-    },
-  })
-
-  // Close Dialog on outside click
-  useOutsideClick({
-    get enabled() {
-      return enabled
-    },
-    get containers() {
-      return resolvedRootContainers
-    },
-    cb(event) {
-      event.preventDefault()
-      close()
-    },
-  })
-
-  // Handle `Escape` to close
-  useEscape({
-    get enabled() {
-      return enabled
-    },
-    get view() {
-      return ownerDocument?.defaultView ?? null
-    },
-    cb(event) {
-      event.preventDefault()
-      event.stopPropagation()
-
-      // Ensure that we blur the current activeElement to prevent maintaining
-      // focus and potentially scrolling the page to the end (because the Dialog
-      // is rendered in a Portal at the end of the document.body and the browser
-      // tries to keep the focused element in view)
-      //
-      // Typically only happens in Safari.
-      if (
-        document.activeElement &&
-        "blur" in document.activeElement &&
-        typeof document.activeElement.blur === "function"
-      ) {
-        document.activeElement.blur()
-      }
-
-      close()
-    },
-  })
-
-  // Scroll lock
-  const scrollLockEnabled = $derived(__demoMode ? false : isClosing ? false : enabled)
-  useScrollLock({
-    get enabled() {
-      return scrollLockEnabled
-    },
-    get ownerDocument() {
-      return ownerDocument
-    },
-    resolveAllowedContainers() {
-      return resolvedRootContainers
-    },
-  })
-
-  // Ensure we close the dialog as soon as the dialog itself becomes hidden
-  useOnDisappear({
-    get enabled() {
-      return enabled
-    },
-    get ref() {
-      return ref
-    },
-    get ondisappear() {
-      return close
-    },
-  })
-
-  const describedby = useDescriptions()
-
-  setContext<DialogContext>("DialogContext", {
-    get titleId() {
-      return _state.titleId
-    },
-    get panelRef() {
-      return _state.panelRef
-    },
-    get dialogState() {
-      return dialogState
-    },
-    get close() {
-      return close
+  if (!hasOpen) {
+    throw new Error(`You provided an \`onclose\` prop to the \`Dialog\`, but forgot an \`open\` prop.`);
+  }
+  if (!hasOnClose) {
+    throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but forgot an \`onclose\` prop.`);
+  }
+  if (!usesOpenClosedState && typeof open !== "boolean") {
+    throw new Error(
+      `You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${open}`
+    );
+  }
+  if (typeof theirProps.onclose !== "function") {
+    throw new Error(
+      `You provided an \`onclose\` prop to the \`Dialog\`, but the value is not a function. Received: ${theirProps.onclose}`
+    );
+  }
+});
+let didWarnOnRole = $state(false);
+const role = $derived.by(() => {
+  if (theirRole === "dialog" || theirRole === "alertdialog") {
+    return theirRole;
+  }
+  if (!didWarnOnRole) {
+    didWarnOnRole = true;
+    console.warn(
+      `Invalid role [${theirRole}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`
+    );
+  }
+  return "dialog";
+});
+const open = $derived(
+  theirOpen === void 0 && usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Open) === State.Open : theirOpen
+);
+const ownerDocument = $derived(getOwnerDocument(ref));
+const dialogState = $derived(open ? DialogStates.Open : DialogStates.Closed);
+let _state = $state({
+  titleId: null,
+  panelRef: null
+});
+const close = $derived(() => onclose(false));
+const setTitleId = (id2) => _state.titleId = id2;
+const enabled = $derived(dialogState === DialogStates.Open);
+const nestedPortals = useNestedPortals();
+const { portals } = $derived(nestedPortals);
+const defaultContainer = {
+  get current() {
+    return _state.panelRef ?? ref;
+  }
+};
+const mainTreeNode = useMainTreeNode();
+let { resolvedContainers: resolvedRootContainers } = $derived(
+  useRootContainers({
+    get mainTreeNode() {
+      return mainTreeNode.node;
     },
-    get unmount() {
-      return unmount
+    get portals() {
+      return portals;
     },
-    setTitleId,
-  })
-
-  const slot = $derived({ open: dialogState === DialogStates.Open } satisfies DialogRenderPropArg)
-
-  const ourProps = $derived({
-    id,
-    role,
-    tabIndex: -1,
-    "aria-modal": __demoMode ? undefined : dialogState === DialogStates.Open ? true : undefined,
-    "aria-labelledby": _state.titleId,
-    "aria-describedby": describedby.value,
-    unmount,
-  })
-
-  const shouldMoveFocusInside = !useIsTouchDevice().value
-  const focusTrapFeatures = $derived.by(() => {
-    let focusTrapFeatures = FocusTrapFeatures.None
-
-    if (enabled && !__demoMode) {
-      focusTrapFeatures |= FocusTrapFeatures.RestoreFocus
-      focusTrapFeatures |= FocusTrapFeatures.TabLock
-
-      if (autofocus) {
-        focusTrapFeatures |= FocusTrapFeatures.AutoFocus
-      }
-
-      if (shouldMoveFocusInside) {
-        focusTrapFeatures |= FocusTrapFeatures.InitialFocus
-      }
+    get defaultContainers() {
+      return defaultContainer.current ? [defaultContainer.current] : [];
     }
-
-    return focusTrapFeatures
   })
-
-  clearOpenClosedContext()
-  createCloseContext({
-    get close() {
-      return close
+);
+const isClosing = $derived(
+  usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Closing) === State.Closing : false
+);
+const inertOthersEnabled = $derived(__demoMode ? false : isClosing ? false : enabled);
+useInertOthers({
+  get enabled() {
+    return inertOthersEnabled;
+  },
+  elements: {
+    get allowed() {
+      return [
+        // Allow the headlessui-portal of the Dialog to be interactive. This
+        // contains the current dialog and the necessary focus guard elements.
+        ref?.closest("[data-headlessui-portal]") ?? null
+      ];
     },
-  })
+    get disallowed() {
+      return [
+        // Disallow the "main" tree root node
+        mainTreeNode.node?.closest("body > *:not(#headlessui-portal-root)") ?? null
+      ];
+    }
+  }
+});
+useOutsideClick({
+  get enabled() {
+    return enabled;
+  },
+  get containers() {
+    return resolvedRootContainers;
+  },
+  cb(event) {
+    event.preventDefault();
+    close();
+  }
+});
+useEscape({
+  get enabled() {
+    return enabled;
+  },
+  get view() {
+    return ownerDocument?.defaultView ?? null;
+  },
+  cb(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (document.activeElement && "blur" in document.activeElement && typeof document.activeElement.blur === "function") {
+      document.activeElement.blur();
+    }
+    close();
+  }
+});
+const scrollLockEnabled = $derived(__demoMode ? false : isClosing ? false : enabled);
+useScrollLock({
+  get enabled() {
+    return scrollLockEnabled;
+  },
+  get ownerDocument() {
+    return ownerDocument;
+  },
+  resolveAllowedContainers() {
+    return resolvedRootContainers;
+  }
+});
+useOnDisappear({
+  get enabled() {
+    return enabled;
+  },
+  get ref() {
+    return ref;
+  },
+  get ondisappear() {
+    return close;
+  }
+});
+const describedby = useDescriptions();
+setContext("DialogContext", {
+  get titleId() {
+    return _state.titleId;
+  },
+  get panelRef() {
+    return _state.panelRef;
+  },
+  get dialogState() {
+    return dialogState;
+  },
+  get close() {
+    return close;
+  },
+  get unmount() {
+    return unmount;
+  },
+  setTitleId
+});
+const slot = $derived({ open: dialogState === DialogStates.Open });
+const ourProps = $derived({
+  id,
+  role,
+  tabIndex: -1,
+  "aria-modal": __demoMode ? void 0 : dialogState === DialogStates.Open ? true : void 0,
+  "aria-labelledby": _state.titleId,
+  "aria-describedby": describedby.value,
+  unmount
+});
+const shouldMoveFocusInside = !useIsTouchDevice().value;
+const focusTrapFeatures = $derived.by(() => {
+  let focusTrapFeatures2 = FocusTrapFeatures.None;
+  if (enabled && !__demoMode) {
+    focusTrapFeatures2 |= FocusTrapFeatures.RestoreFocus;
+    focusTrapFeatures2 |= FocusTrapFeatures.TabLock;
+    if (autofocus) {
+      focusTrapFeatures2 |= FocusTrapFeatures.AutoFocus;
+    }
+    if (shouldMoveFocusInside) {
+      focusTrapFeatures2 |= FocusTrapFeatures.InitialFocus;
+    }
+  }
+  return focusTrapFeatures2;
+});
+clearOpenClosedContext();
+createCloseContext({
+  get close() {
+    return close;
+  }
+});
 </script>
 
 {#snippet internal(transitionProps?: Record<string, any>)}

package/dist/dialog/DialogBackdrop.svelte

@@ -1,34 +1,17 @@
-<script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-
-  let DEFAULT_BACKDROP_TAG = "div" as const
-  type BackdropRenderPropArg = {
-    open: boolean
-  }
-
-  export type DialogBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<
-    TTag,
-    BackdropRenderPropArg,
-    never,
-    { transition?: boolean }
-  >
+<script lang="ts" module>let DEFAULT_BACKDROP_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">
-  import { DialogStates, useDialogContext } from "./context.svelte.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { mergeProps } from "../utils/render.js"
-  import TransitionChild from "../transition/TransitionChild.svelte"
-
-  let { ref = $bindable(), transition = false, ...theirProps }: { as?: TTag } & DialogBackdropProps<TTag> = $props()
-  const _state = useDialogContext("Dialog.Panel")
-  const { dialogState, unmount } = $derived(_state)
-
-  const slot = $derived({ open: dialogState === DialogStates.Open } satisfies BackdropRenderPropArg)
-
-  const ourProps = mergeProps({
-    "aria-hidden": true,
-  })
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">import { DialogStates, useDialogContext } from "./context.svelte.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { mergeProps } from "../utils/render.js";
+import TransitionChild from "../transition/TransitionChild.svelte";
+let { ref = $bindable(), transition = false, ...theirProps } = $props();
+const _state = useDialogContext("Dialog.Panel");
+const { dialogState, unmount } = $derived(_state);
+const slot = $derived({ open: dialogState === DialogStates.Open });
+const ourProps = mergeProps({
+  "aria-hidden": true
+});
 </script>
 
 {#if transition}