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

package/dist/dialog/InternalDialog.svelte

@@ -1,209 +1,270 @@
-<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 { DEFAULT_DIALOG_TAG, DialogRenderFeatures } from "./Dialog.svelte";
-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";
-const internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-dialog-${internalId}`,
-  open: theirOpen,
-  onclose,
-  initialFocus,
-  role: theirRole = "dialog",
-  autofocus = true,
-  __demoMode = false,
-  unmount = false,
-  ...theirProps
-} = $props();
-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 usesOpenClosedState = useOpenClosed();
-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 portals() {
-      return portals;
-    },
-    get defaultContainers() {
-      return defaultContainer.current ? [defaultContainer.current] : [];
-    }
-  })
-);
-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
-      ];
+<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 { DEFAULT_DIALOG_TAG, DialogRenderFeatures, type DialogProps, type DialogRenderPropArg } from "./Dialog.svelte"
+  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 type { ElementType } from "../utils/types.js"
+  import { DialogStates, type DialogContext, type StateDefinition } from "./context.svelte.js"
+  import { useDescriptions } from "../description/context.svelte.js"
+
+  const internalId = useId()
+  let {
+    ref = $bindable(),
+    id = `headlessui-dialog-${internalId}`,
+    open: theirOpen,
+    onclose,
+    initialFocus,
+    role: theirRole = "dialog",
+    autofocus = true,
+    __demoMode = false,
+    unmount = false,
+    ...theirProps
+  }: { as?: TTag } & DialogProps<TTag> = $props()
+
+  let didWarnOnRole = $state(false)
+
+  const role = $derived.by(() => {
+    if (theirRole === "dialog" || theirRole === "alertdialog") {
+      return theirRole
     }
-  }
-});
-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();
+
+    if (!didWarnOnRole) {
+      didWarnOnRole = true
+      console.warn(
+        `Invalid role [${theirRole}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`
+      )
     }
-    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;
+
+    return "dialog"
+  })
+
+  const usesOpenClosedState = useOpenClosed()
+  // 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
+    },
   }
-});
-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;
+
+  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
+    },
+    get unmount() {
+      return unmount
+    },
+    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
+      }
     }
-  }
-  return focusTrapFeatures2;
-});
-clearOpenClosedContext();
-createCloseContext({
-  get close() {
-    return close;
-  }
-});
+
+    return focusTrapFeatures
+  })
+
+  clearOpenClosedContext()
+  createCloseContext({
+    get close() {
+      return close
+    },
+  })
 </script>
 
 <ForcePortalRoot force={true}>

package/dist/field/Field.svelte

@@ -1,31 +1,54 @@
-<script lang="ts" module>let DEFAULT_FIELD_TAG = "div";
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+
+  let DEFAULT_FIELD_TAG = "div" as const
+
+  type FieldRenderPropArg = {}
+  type FieldPropsWeControl = never
+
+  export type FieldProps<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = Props<
+    TTag,
+    FieldRenderPropArg,
+    FieldPropsWeControl,
+    {
+      disabled?: boolean
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">import { useDisabled } from "../hooks/use-disabled.js";
-import { createIdContext } from "../utils/id.js";
-import { stateFromSlot } from "../utils/state.js";
-import { nanoid } from "nanoid";
-import { setContext } from "svelte";
-import { useLabels } from "../label/context.svelte.js";
-import { useDescriptions } from "../description/context.svelte.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-let { ref = $bindable(), disabled: ownDisabled = false, ...theirProps } = $props();
-const inputId = `headlessui-control-${nanoid(8)}`;
-createIdContext(inputId);
-useLabels();
-useDescriptions();
-const providedDisabled = useDisabled();
-const disabled = $derived(providedDisabled.value || ownDisabled);
-setContext("DisabledContext", {
-  get value() {
-    return disabled;
-  }
-});
-const slot = $derived({ disabled });
-const ourProps = $derived({
-  disabled: disabled || void 0,
-  "aria-disabled": disabled || void 0
-});
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { createIdContext } from "../utils/id.js"
+  import { stateFromSlot } from "../utils/state.js"
+  import { nanoid } from "nanoid"
+  import { setContext, type Snippet } from "svelte"
+  import { useLabels } from "../label/context.svelte.js"
+  import { useDescriptions } from "../description/context.svelte.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  let { ref = $bindable(), disabled: ownDisabled = false, ...theirProps }: { as?: TTag } & FieldProps<TTag> = $props()
+
+  const inputId = `headlessui-control-${nanoid(8)}`
+  createIdContext(inputId)
+
+  useLabels()
+  useDescriptions()
+
+  const providedDisabled = useDisabled()
+  const disabled = $derived(providedDisabled.value || ownDisabled)
+
+  setContext("DisabledContext", {
+    get value() {
+      return disabled
+    },
+  })
+
+  const slot = $derived({ disabled })
+
+  const ourProps = $derived({
+    disabled: disabled || undefined,
+    "aria-disabled": disabled || undefined,
+  })
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELD_TAG} name="Field" bind:ref />

package/dist/fieldset/Fieldset.svelte

@@ -1,34 +1,55 @@
-<script lang="ts" module>let DEFAULT_FIELDSET_TAG = "fieldset";
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+  let DEFAULT_FIELDSET_TAG = "fieldset" as const
+
+  type FieldsetRenderPropArg = {}
+  type FieldsetPropsWeControl = "aria-labelledby" | "aria-disabled" | "role"
+
+  export type FieldsetProps<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> = Props<
+    TTag,
+    FieldsetRenderPropArg,
+    FieldsetPropsWeControl,
+    {
+      disabled?: boolean
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG">import { setContext } from "svelte";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { useLabels } from "../label/context.svelte.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-let {
-  ref = $bindable(),
-  disabled: ownDisabled = false,
-  ...theirProps
-} = $props();
-const providedDisabled = useDisabled();
-const disabled = $derived(providedDisabled.value || ownDisabled);
-setContext("DisabledContext", {
-  get value() {
-    return disabled;
-  }
-});
-const labelledBy = useLabels();
-const slot = $derived({ disabled });
-const ourProps = $derived(
-  (theirProps.as ?? DEFAULT_FIELDSET_TAG) === "fieldset" ? {
-    "aria-labelledby": labelledBy.value,
-    disabled: disabled || void 0
-  } : {
-    role: "group",
-    "aria-labelledby": labelledBy.value,
-    "aria-disabled": disabled || void 0
-  }
-);
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG">
+  import { setContext } from "svelte"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useLabels } from "../label/context.svelte.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  let {
+    ref = $bindable(),
+    disabled: ownDisabled = false,
+    ...theirProps
+  }: { as?: TTag } & FieldsetProps<TTag> = $props()
+
+  const providedDisabled = useDisabled()
+  const disabled = $derived(providedDisabled.value || ownDisabled)
+
+  setContext("DisabledContext", {
+    get value() {
+      return disabled
+    },
+  })
+
+  const labelledBy = useLabels()
+  const slot = $derived({ disabled })
+  const ourProps = $derived(
+    (theirProps.as ?? DEFAULT_FIELDSET_TAG) === "fieldset"
+      ? {
+          "aria-labelledby": labelledBy.value,
+          disabled: disabled || undefined,
+        }
+      : {
+          role: "group",
+          "aria-labelledby": labelledBy.value,
+          "aria-disabled": disabled || undefined,
+        }
+  )
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELDSET_TAG} name="Fieldset" bind:ref />