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

package/dist/dialog/InternalDialog.svelte

@@ -1,294 +0,0 @@
-<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
-    }
-
-    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()
-  // 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 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 focusTrapFeatures
-  })
-
-  clearOpenClosedContext()
-  createCloseContext({
-    get close() {
-      return close
-    },
-  })
-</script>
-
-<ForcePortalRoot force={true}>
-  <Portal>
-    <PortalGroup target={ref ?? null}>
-      <ForcePortalRoot force={false}>
-        <FocusTrap
-          {initialFocus}
-          initialFocusFallback={ref}
-          containers={resolvedRootContainers}
-          features={focusTrapFeatures}
-        >
-          <ElementOrComponent
-            {ourProps}
-            {theirProps}
-            slots={slot}
-            defaultTag={DEFAULT_DIALOG_TAG}
-            features={DialogRenderFeatures}
-            visible={dialogState === DialogStates.Open}
-            name="Dialog"
-            bind:ref
-          />
-        </FocusTrap>
-      </ForcePortalRoot>
-    </PortalGroup>
-  </Portal>
-</ForcePortalRoot>

package/dist/dialog/InternalDialog.svelte.d.ts

@@ -1,42 +0,0 @@
-import { DEFAULT_DIALOG_TAG, type DialogRenderPropArg } from "./Dialog.svelte";
-import type { ElementType } from "../utils/types.js";
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "autofocus" | "unmount" | "static" | "id" | "role" | "onclose" | "initialFocus" | ("aria-describedby" | "aria-labelledby" | "aria-modal") | "open" | "transition" | "__demoMode"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<DialogRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: DialogRenderPropArg) => string) | undefined;
-    } : {}) & {
-        static?: boolean | undefined;
-        unmount?: boolean | undefined;
-    } & {
-        id?: string;
-        open?: boolean;
-        onclose(value: boolean): void;
-        initialFocus?: HTMLElement;
-        role?: "dialog" | "alertdialog";
-        autofocus?: boolean;
-        transition?: boolean;
-        __demoMode?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const InternalDialog: $$IsomorphicComponent;
-type InternalDialog<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = InstanceType<typeof InternalDialog<TTag>>;
-export default InternalDialog;

package/dist/internal/HoistFormFields.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { getContext, type Snippet } from "svelte"
-  import Portal from "./Portal.svelte"
-
-  let { children }: { children: Snippet } = $props()
-
-  const formFieldsContext = getContext<{ target?: HTMLElement }>("FormFieldsContext")
-</script>
-
-{#if !formFieldsContext}
-  {@render children()}
-{:else if formFieldsContext.target}
-  <Portal target={formFieldsContext.target}>{@render children()}</Portal>
-{/if}

package/dist/internal/HoistFormFields.svelte.d.ts

@@ -1,21 +0,0 @@
-import { type Snippet } from "svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const HoistFormFields: $$__sveltets_2_IsomorphicComponent<{
-    children: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type HoistFormFields = InstanceType<typeof HoistFormFields>;
-export default HoistFormFields;

package/dist/internal/id.d.ts

@@ -1,8 +0,0 @@
-type IdContext = {
-    value?: string;
-};
-export declare function useProvidedId(): IdContext | undefined;
-export declare function useIdContext(options: {
-    id?: string;
-}): void;
-export {};

package/dist/internal/id.js

@@ -1,11 +0,0 @@
-import { getContext, setContext } from "svelte";
-export function useProvidedId() {
-    return getContext("IdContext");
-}
-export function useIdContext(options) {
-    setContext("IdContext", {
-        get value() {
-            return options.id;
-        },
-    });
-}

package/dist/utils/Generic.svelte

@@ -1,56 +0,0 @@
-<script lang="ts" generics="TTag extends keyof SvelteHTMLProps, TSlot, TValue">
-  import { stateFromSlot } from "./state.js"
-  import type { ElementType, Props, SvelteHTMLProps } from "./types.js"
-
-  let {
-    slot = {} as TSlot,
-    tag,
-    name,
-    ref = $bindable(),
-    value = $bindable(),
-    checked = $bindable(),
-    children,
-    as = tag as TTag,
-    unmount,
-    static: isStatic,
-    ...props
-  }: {
-    as?: TTag
-    slot: TSlot
-    tag: ElementType
-    name: string
-    ref?: HTMLElement
-    value?: TValue
-    checked?: boolean
-  } & Props<TTag, TSlot> = $props()
-
-  const resolvedClass = $derived(
-    typeof props.class === "function" ? props.class(slot) : (props.class as string | undefined)
-  )
-</script>
-
-{#if as === "svelte:fragment"}
-  {#if children}{@render children(slot, {
-      ...props,
-      ...(resolvedClass ? { class: resolvedClass } : {}),
-      ...stateFromSlot(slot),
-    })}{/if}
-{:else if children}
-  {#if as === "select"}
-    <select bind:this={ref} {...props} class={resolvedClass} {...stateFromSlot(slot)} bind:value>
-      {@render children(slot, {})}
-    </select>
-  {:else}
-    <svelte:element this={as} bind:this={ref} {...props} class={resolvedClass} {...stateFromSlot(slot)}>
-      {@render children(slot, {})}
-    </svelte:element>
-  {/if}
-{:else if as === "input" && props.type === "checkbox"}
-  <input type="checkbox" bind:this={ref} {...props} class={resolvedClass} {...stateFromSlot(slot)} bind:checked />
-{:else if as === "input"}
-  <input bind:this={ref} {...props} class={resolvedClass} {...stateFromSlot(slot)} bind:value />
-{:else if as === "textarea"}
-  <textarea bind:this={ref} {...props} class={resolvedClass} {...stateFromSlot(slot)} bind:value></textarea>
-{:else}
-  <svelte:element this={as} bind:this={ref} {...props} class={resolvedClass} {...stateFromSlot(slot)} />
-{/if}

package/dist/utils/Generic.svelte.d.ts

@@ -1,35 +0,0 @@
-import type { ElementType, SvelteHTMLProps } from "./types.js";
-declare class __sveltets_Render<TTag extends keyof SvelteHTMLProps, TSlot, TValue> {
-    props(): {
-        as?: TTag | undefined;
-        slot: TSlot;
-        tag: ElementType;
-        name: string;
-        ref?: HTMLElement;
-        value?: TValue | undefined;
-        checked?: boolean;
-    } & (Exclude<keyof import("./types.js").PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof import("./types.js").PropsOf<TTag> ? { [P in T]: import("./types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("./types.js").Children<TSlot> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("./types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("./types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("./types.js").PropsOf<TTag>["class"] | ((bag: TSlot) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref" | "value" | "checked";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends keyof SvelteHTMLProps, TSlot, TValue>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TSlot, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TSlot, TValue>['props']>, ReturnType<__sveltets_Render<TTag, TSlot, TValue>['events']>, ReturnType<__sveltets_Render<TTag, TSlot, TValue>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TSlot, TValue>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TSlot, TValue>['exports']>;
-    <TTag extends keyof SvelteHTMLProps, TSlot, TValue>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TSlot, TValue>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag, TSlot, TValue>['events']>;
-    }): ReturnType<__sveltets_Render<TTag, TSlot, TValue>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
-}
-declare const Generic: $$IsomorphicComponent;
-type Generic<TTag extends keyof SvelteHTMLProps, TSlot, TValue> = InstanceType<typeof Generic<TTag, TSlot, TValue>>;
-export default Generic;

package/dist/utils/alternative-types.d.ts

@@ -1,21 +0,0 @@
-import type { Snippet } from "svelte";
-import type { SvelteHTMLElements } from "svelte/elements";
-export interface SvelteHTMLProps extends SvelteHTMLElements {
-    "svelte:fragment": {};
-}
-export type ElementType = keyof SvelteHTMLProps;
-export type Expand<T> = T extends infer O ? {
-    [K in keyof O]: O[K];
-} : never;
-export type Children<TSlot> = Snippet | Snippet<[TSlot, Record<string, any>]>;
-type OurProps<TSlot> = {
-    children?: Children<TSlot>;
-    ref?: HTMLElement;
-    class?: string | null | ((bag: TSlot) => string);
-};
-type MergeProps3<T, U, V> = {
-    [K in keyof T | keyof U | keyof V]?: K extends keyof V ? V[K] : K extends keyof U ? U[K] : K extends keyof T ? T[K] : never;
-};
-export type Props<TTag extends ElementType, TSlot = {}, TOmittableProps extends PropertyKey = never, Overrides = {}> = MergeProps3<SvelteHTMLProps[TTag], OurProps<TSlot>, Overrides>;
-export type EnsureArray<T> = T extends any[] ? T : Expand<T>[];
-export {};