@pzerelles/headlessui-svelte 2.1.2-next.22 → 2.1.2-next.24

package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.js

@@ -30,15 +30,15 @@ export function useFloating(options = {}) {
     let _reference = $state(null);
     let _floating = $state(null);
     const setReference = (node) => {
-        if (node !== referenceRef.current) {
-            referenceRef.current = node;
-            _reference = node;
+        if ((node ?? null) !== referenceRef.current) {
+            referenceRef.current = node ?? null;
+            _reference = node ?? null;
         }
     };
     const setFloating = (node) => {
-        if (node !== floatingRef.current) {
-            floatingRef.current = node;
-            _floating = node;
+        if ((node ?? null) !== floatingRef.current) {
+            floatingRef.current = node ?? null;
+            _floating = node ?? null;
         }
     };
     const referenceEl = $derived((externalReference || _reference));

package/dist/utils/types.d.ts

@@ -8,16 +8,23 @@ export type Expand<T> = T extends infer O ? {
     [K in keyof O]: O[K];
 } : never;
 export type PropsOf<TTag extends ElementType> = SvelteHTMLProps[TTag];
-type PropsWeControl = "as" | "children" | "refName" | "class";
+type PropsWeControl = "as" | "children" | "class";
 type CleanProps<TTag extends ElementType, TOmittableProps extends PropertyKey = never> = Omit<PropsOf<TTag>, TOmittableProps | PropsWeControl>;
 type OurProps<TSlot> = {
-    children?: Snippet<[TSlot, Record<string, any>]>;
+    children?: Snippet<[{
+        slot: TSlot;
+        props: Record<string, any>;
+    }]>;
     ref?: HTMLElement;
 };
 type HasProperty<T extends object, K extends PropertyKey> = T extends never ? never : K extends keyof T ? true : never;
-type ClassNameOverride<TTag extends ElementType, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, "class"> ? {
-    class?: PropsOf<TTag>["class"] | ((bag: TSlot) => string);
+type ClassNameOverride<TTag extends ElementType, TSlot = {}> = true extends HasProperty<SvelteHTMLElements[TTag], "class"> ? {
+    class?: string | null | ((bag: TSlot) => string);
 } : {};
 export type Props<TTag extends ElementType, TSlot = {}, TOmittableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmittableProps | keyof Overrides> & OurProps<TSlot> & ClassNameOverride<TTag, TSlot> & Overrides;
 export type EnsureArray<T> = T extends any[] ? T : Expand<T>[];
+export type ChildrenArgs<T> = T extends OurProps<infer TSlot> ? {
+    slot: TSlot;
+    props: Record<string, any>;
+} : never;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.22",
+  "version": "2.1.2-next.24",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -40,7 +40,7 @@
     "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "publint": "^0.2.11",
-    "svelte": "5.0.0-next.249",
+    "svelte": "5.0.0-next.252",
     "svelte-check": "^3.8.6",
     "tailwindcss": "^3.4.12",
     "tslib": "^2.7.0",

package/dist/dialog/InternalDialog.svelte

@@ -1,233 +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 } 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
-      ];
-    }
-  }
-});
-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>
-
-<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("svelte").Snippet<[DialogRenderPropArg, Record<string, any>]> | 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;