@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.2

package/dist/internal/floating.svelte.js

@@ -1,11 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable prefer-const */
 import { useDisposables } from "../utils/disposables.js";
-import { useRef } from "../utils/ref.svelte.js";
-import { autoUpdate, flip as flipMiddleware, 
+import { computePosition } from "@floating-ui/dom";
+import { flip as flipMiddleware, 
 //inner as innerMiddleware,
-offset as offsetMiddleware, shift as shiftMiddleware, size as sizeMiddleware, useFloating as _useFloating, 
-//useInnerOffset,
-useInteractions, } from "@skeletonlabs/floating-ui-svelte";
-import { getContext, setContext } from "svelte";
+offset as offsetMiddleware, shift as shiftMiddleware, size as sizeMiddleware, } from "@floating-ui/core";
+/*import {
+  autoUpdate,
+  useFloating as _useFloating,
+  //useInnerOffset,
+  useInteractions,
+  //type InnerProps,
+  type UseFloatingReturn,
+} from "@skeletonlabs/floating-ui-svelte"*/
+import { getContext, setContext, untrack } from "svelte";
 export function useResolvedAnchor(anchor) {
     if (!anchor)
         return null; // Disable entirely
@@ -17,36 +26,37 @@ export function useFloating() {
     return getContext("FloatingContext");
 }
 export function useFloatingPanelProps() {
-    let { getFloatingProps, slot } = getContext("FloatingContext");
+    const { getFloatingProps, slot } = getContext("FloatingContext");
     return (...args) => {
         return Object.assign({}, getFloatingProps(...args), {
             "data-anchor": slot.anchor,
         });
     };
 }
-export function useFloatingPanel(placement = null) {
-    if (placement === false)
-        placement = null; // Disable entirely
-    if (typeof placement === "string")
-        placement = { to: placement }; // Simple string based value
+export function useFloatingPanel(options) {
+    const placement = $derived.by(() => {
+        if (options.placement === false)
+            return null; // Disable entirely
+        if (typeof options.placement === "string")
+            return { to: options.placement }; // Simple string based value
+        return options.placement;
+    });
     const updatePlacementConfig = getContext("PlacementContext");
-    /*let stablePlacement = useMemo(
-        () => placement,
-        [
-          JSON.stringify(
-            placement,
-            typeof HTMLElement !== 'undefined'
-              ? (_, v) => {
-                  if (v instanceof HTMLElement) {
-                    return v.outerHTML
-                  }
-                  return v
-                }
-              : undefined
-          ),
-        ]
-      )*/
-    updatePlacementConfig?.(placement ?? null);
+    const trigger = $derived(JSON.stringify(placement, typeof HTMLElement !== "undefined"
+        ? (_, v) => {
+            if (v instanceof HTMLElement) {
+                return v.outerHTML;
+            }
+            return v;
+        }
+        : undefined));
+    const stablePlacement = $derived.by(() => {
+        trigger;
+        return untrack(() => placement);
+    });
+    $effect(() => {
+        updatePlacementConfig?.(stablePlacement ?? null);
+    });
     const context = getContext("FloatingContext");
     return {
         get setFloating() {
@@ -58,152 +68,164 @@ export function useFloatingPanel(placement = null) {
     };
 }
 // TODO: Make this a config part of the `config`. Just need to decide on a name.
-let MINIMUM_ITEMS_VISIBLE = 4;
+//let MINIMUM_ITEMS_VISIBLE = 4
 export const createFloatingContext = ({ enabled = true } = {}) => {
     let config = $state(null);
-    let innerOffset = $state(0);
-    let overflowRef = useRef(null);
+    //let innerOffset = $state(0)
+    //let overflowRef = $state<HTMLElement | null>(null)
+    let referenceEl = $state(null);
     let floatingEl = $state(null);
     $effect(() => useFixScrollingPixel(floatingEl));
     const isEnabled = $derived(enabled && config !== null && floatingEl !== null);
-    let { to: placement = "bottom", gap = 0, offset = 0, padding = 0, inner, } = useResolvedConfig({
+    const { to: placement = "bottom", gap = 0, offset = 0, padding = 0, inner, } = $derived(useResolvedConfig({
         get config() {
             return config;
         },
         get element() {
             return floatingEl;
         },
-    });
-    let [to, align = "center"] = placement.split(" ");
+    }));
+    const [to, align = "center"] = $derived(placement.split(" "));
     // Reset
     $effect(() => {
         if (!isEnabled)
             return;
-        innerOffset = 0;
+        //innerOffset = 0
     });
-    const { elements, floatingStyles, context } = $derived(_useFloating({
-        open: isEnabled,
-        placement: to === "selection"
-            ? align === "center"
-                ? "bottom"
-                : `bottom-${align}`
-            : align === "center"
-                ? `${to}`
-                : `${to}-${align}`,
-        // This component will be used in combination with a `Portal`, which means the floating
-        // element will be rendered outside of the current DOM tree.
-        strategy: "absolute",
-        // We use the panel in a `Dialog` which is making the page inert, therefore no re-positioning is
-        // needed when scrolling changes.
-        transform: false,
-        middleware: [
-            // - The `mainAxis` is set to `gap` which defines the gap between the panel and the
-            //   trigger/reference.
-            // - The `crossAxis` is set to `offset` which nudges the panel from its original position.
-            //
-            // When we are showing the panel on top of the selected item, we don't want a gap between the
-            // reference and the panel, therefore setting the `mainAxis` to `0`.
-            offsetMiddleware({
-                mainAxis: to === "selection" ? 0 : gap,
-                crossAxis: offset,
-            }),
-            // When the panel overflows the viewport, we will try to nudge the panel to the other side to
-            // ensure it's not clipped. We use the `padding` to define the  minimum space between the
-            // panel and the viewport.
-            shiftMiddleware({ padding }),
-            // The `flip` middleware will swap the `placement` of the panel if there is not enough room.
-            // This is not compatible with the `inner` middleware (which is only enabled when `to` is set
-            // to "selection").
-            to !== "selection" && flipMiddleware({ padding }),
-            // The `inner` middleware will ensure the panel is always fully visible on screen and
-            // positioned on top of the reference and moved to the currently selected item.
-            to === "selection" && inner
-                ? null /* TODO: use inner when available: innerMiddleware({
-                    ...inner,
-                    padding, // For overflow detection
-                    overflowRef,
-                    offset: innerOffset,
-                    minItemsVisible: MINIMUM_ITEMS_VISIBLE,
-                    referenceOverflowThreshold: padding,
-                    onFallbackChange(fallback) {
-                      if (!fallback) return
-                      let parent = context.elements.floating
-                      if (!parent) return
-                      let scrollPaddingBottom =
-                        parseFloat(getComputedStyle(parent!).scrollPaddingBottom) || 0
-        
-                      // We want at least X visible items, but if there are less than X items in the list,
-                      // we want to show as many as possible.
-                      let missing = Math.min(MINIMUM_ITEMS_VISIBLE, parent.childElementCount)
-        
-                      let elementHeight = 0
-                      let elementAmountVisible = 0
-        
-                      for (let child of context.elements.floating?.childNodes ?? []) {
-                        if (child instanceof HTMLElement) {
-                          let childTop = child.offsetTop
-                          // It can be that the child is fully visible, but we also want to keep the scroll
-                          // padding into account to ensure the UI looks good. Therefore we fake that the
-                          // bottom of the child is actually `scrollPaddingBottom` amount of pixels lower.
-                          let childBottom = childTop + child.clientHeight + scrollPaddingBottom
-        
-                          let parentTop = parent.scrollTop
-                          let parentBottom = parentTop + parent.clientHeight
-        
-                          // Figure out if the child is fully visible in the scroll parent.
-                          if (childTop >= parentTop && childBottom <= parentBottom) {
-                            missing--
-                          } else {
-                            // Not fully visible, so we will use this child to calculate the height of
-                            // each item. We will also use this to calculate how much of the item is
-                            // already visible.
-                            elementAmountVisible = Math.max(
-                              0,
-                              Math.min(childBottom, parentBottom) - Math.max(childTop, parentTop)
-                            )
-                            elementHeight = child.clientHeight
-                            break
-                          }
-                        }
-                      }
-        
-                      // There are fewer visible items than we want, so we will try to nudge the offset
-                      // to show more items.
-                      if (missing >= 1) {
-                        setInnerOffset((existingOffset) => {
-                          let newInnerOffset =
-                            elementHeight * missing - // `missing` amount of `elementHeight`
-                            elementAmountVisible + // The amount of the last item that is visible
-                            scrollPaddingBottom // The scroll padding to ensure the UI looks good
-        
-                          // Nudged enough already, no need to continue
-                          if (existingOffset >= newInnerOffset) {
-                            return existingOffset
-                          }
-        
-                          return newInnerOffset
-                        })
-                      }
+    let floatingStyles = $state();
+    let context = $state();
+    let currentComputeId = $state(0);
+    $effect(() => {
+        if (!referenceEl || !floatingEl)
+            return;
+        const computeId = untrack(() => currentComputeId + 1);
+        currentComputeId = computeId;
+        computePosition(referenceEl, floatingEl, {
+            placement: to === "selection"
+                ? align === "center"
+                    ? "bottom"
+                    : `bottom-${align}`
+                : align === "center"
+                    ? `${to}`
+                    : `${to}-${align}`,
+            // This component will be used in combination with a `Portal`, which means the floating
+            // element will be rendered outside of the current DOM tree.
+            strategy: "absolute",
+            middleware: [
+                // - The `mainAxis` is set to `gap` which defines the gap between the panel and the
+                //   trigger/reference.
+                // - The `crossAxis` is set to `offset` which nudges the panel from its original position.
+                //
+                // When we are showing the panel on top of the selected item, we don't want a gap between the
+                // reference and the panel, therefore setting the `mainAxis` to `0`.
+                offsetMiddleware({
+                    mainAxis: to === "selection" ? 0 : gap,
+                    crossAxis: offset,
+                }),
+                // When the panel overflows the viewport, we will try to nudge the panel to the other side to
+                // ensure it's not clipped. We use the `padding` to define the  minimum space between the
+                // panel and the viewport.
+                shiftMiddleware({ padding }),
+                // The `flip` middleware will swap the `placement` of the panel if there is not enough room.
+                // This is not compatible with the `inner` middleware (which is only enabled when `to` is set
+                // to "selection").
+                to !== "selection" && flipMiddleware({ padding }),
+                // The `inner` middleware will ensure the panel is always fully visible on screen and
+                // positioned on top of the reference and moved to the currently selected item.
+                to === "selection" && inner
+                    ? null /* TODO: use inner when available: innerMiddleware({
+                          ...inner,
+                          padding, // For overflow detection
+                          overflowRef,
+                          offset: innerOffset,
+                          minItemsVisible: MINIMUM_ITEMS_VISIBLE,
+                          referenceOverflowThreshold: padding,
+                          onFallbackChange(fallback) {
+                            if (!fallback) return
+                            let parent = context.elements.floating
+                            if (!parent) return
+                            let scrollPaddingBottom =
+                              parseFloat(getComputedStyle(parent!).scrollPaddingBottom) || 0
+              
+                            // We want at least X visible items, but if there are less than X items in the list,
+                            // we want to show as many as possible.
+                            let missing = Math.min(MINIMUM_ITEMS_VISIBLE, parent.childElementCount)
+              
+                            let elementHeight = 0
+                            let elementAmountVisible = 0
+              
+                            for (let child of context.elements.floating?.childNodes ?? []) {
+                              if (child instanceof HTMLElement) {
+                                let childTop = child.offsetTop
+                                // It can be that the child is fully visible, but we also want to keep the scroll
+                                // padding into account to ensure the UI looks good. Therefore we fake that the
+                                // bottom of the child is actually `scrollPaddingBottom` amount of pixels lower.
+                                let childBottom = childTop + child.clientHeight + scrollPaddingBottom
+              
+                                let parentTop = parent.scrollTop
+                                let parentBottom = parentTop + parent.clientHeight
+              
+                                // Figure out if the child is fully visible in the scroll parent.
+                                if (childTop >= parentTop && childBottom <= parentBottom) {
+                                  missing--
+                                } else {
+                                  // Not fully visible, so we will use this child to calculate the height of
+                                  // each item. We will also use this to calculate how much of the item is
+                                  // already visible.
+                                  elementAmountVisible = Math.max(
+                                    0,
+                                    Math.min(childBottom, parentBottom) - Math.max(childTop, parentTop)
+                                  )
+                                  elementHeight = child.clientHeight
+                                  break
+                                }
+                              }
+                            }
+              
+                            // There are fewer visible items than we want, so we will try to nudge the offset
+                            // to show more items.
+                            if (missing >= 1) {
+                              setInnerOffset((existingOffset) => {
+                                let newInnerOffset =
+                                  elementHeight * missing - // `missing` amount of `elementHeight`
+                                  elementAmountVisible + // The amount of the last item that is visible
+                                  scrollPaddingBottom // The scroll padding to ensure the UI looks good
+              
+                                // Nudged enough already, no need to continue
+                                if (existingOffset >= newInnerOffset) {
+                                  return existingOffset
+                                }
+              
+                                return newInnerOffset
+                              })
+                            }
+                          },
+                        })*/
+                    : null,
+                // The `size` middleware will ensure the panel is never bigger than the viewport minus the
+                // provided `padding` that we want.
+                sizeMiddleware({
+                    padding,
+                    apply({ availableWidth, availableHeight, elements }) {
+                        Object.assign(elements.floating.style, {
+                            overflow: "auto",
+                            maxWidth: `${availableWidth}px`,
+                            maxHeight: `min(var(--anchor-max-height, 100vh), ${availableHeight}px)`,
+                        });
                     },
-                  })*/
-                : null,
-            // The `size` middleware will ensure the panel is never bigger than the viewport minus the
-            // provided `padding` that we want.
-            sizeMiddleware({
-                padding,
-                apply({ availableWidth, availableHeight, elements }) {
-                    Object.assign(elements.floating.style, {
-                        overflow: "auto",
-                        maxWidth: `${availableWidth}px`,
-                        maxHeight: `min(var(--anchor-max-height, 100vh), ${availableHeight}px)`,
-                    });
-                },
-            }),
-        ].filter(Boolean),
-        whileElementsMounted: autoUpdate,
-    }));
+                }),
+            ].filter(Boolean),
+        }).then((res) => {
+            if (currentComputeId === computeId) {
+                // Ensure only the last compute updates the context if multiple are running in parallel
+                context = res;
+                const { x, y } = res;
+                floatingStyles = `position: absolute; left: ${x}px; top: ${y}px;`;
+            }
+        });
+    });
     // Calculate placement information to expose as data attributes
-    let [exposedTo = to, exposedAlign = align] = context.placement.split("-");
+    let [exposedTo = to, exposedAlign = align] = context?.placement.split("-") ?? [];
     // If user-land code is using custom styles specifically for `bottom`, but
     // they chose `selection`, then we want to make sure to map it to selection
     // again otherwise styles could be wrong.
@@ -216,35 +238,17 @@ export const createFloatingContext = ({ enabled = true } = {}) => {
         overflowRef,
         onChange: setInnerOffset,
       })*/
-    let { getReferenceProps, getFloatingProps } = useInteractions([
-    /*innerOffsetConfig*/
-    ]);
-    let setFloatingRef = (el) => {
-        floatingEl = el || null;
-        elements.floating = el;
-    };
-    /*
-    
-      return (
-        <PlacementContext.Provider value={setConfig}>
-          <FloatingContext.Provider
-            value={{
-              setFloating: setFloatingRef,
-              setReference: refs.setReference,
-              styles: floatingStyles,
-              getReferenceProps,
-              getFloatingProps,
-              slot: data,
-            }}
-          >
-            {children}
-          </FloatingContext.Provider>
-        </PlacementContext.Provider>
-      )*/
+    const getReferenceProps = () => ({});
+    const getFloatingProps = () => ({});
+    /*let { getReferenceProps, getFloatingProps } = useInteractions([
+      innerOffsetConfig
+    ])*/
     const floatingContext = {
-        setFloating: setFloatingRef,
+        setFloating: (floating) => {
+            floatingEl = floating || null;
+        },
         setReference: (reference) => {
-            elements.reference = reference;
+            referenceEl = reference || null;
         },
         get styles() {
             return floatingStyles;
@@ -256,7 +260,9 @@ export const createFloatingContext = ({ enabled = true } = {}) => {
         },
     };
     setContext("FloatingContext", floatingContext);
-    setContext("PlacementContext", null);
+    setContext("PlacementContext", (value) => {
+        config = value;
+    });
     return floatingContext;
 };
 function useFixScrollingPixel(element) {
@@ -308,7 +314,9 @@ function useResolvedConfig({ config, element, }) {
         },
     });
     return {
-        ...config,
+        get to() {
+            return config?.to;
+        },
         get gap() {
             return gap.value;
         },
@@ -318,6 +326,9 @@ function useResolvedConfig({ config, element, }) {
         get padding() {
             return padding.value;
         },
+        get inner() {
+            return config?.inner;
+        },
     };
 }
 function useResolvePxValue({ input, element, defaultValue, }) {

package/dist/internal/id.d.ts

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

package/dist/internal/open-closed.d.ts

@@ -7,7 +7,7 @@ export declare enum State {
 export type OpenClosedContext = {
     readonly value: State;
 };
-export declare function useOpenClosed(): OpenClosedContext;
+export declare function useOpenClosed(): OpenClosedContext | null;
 export declare function createOpenClosedContext(options: {
     readonly value: State;
 }): void;

package/dist/internal/open-closed.js

@@ -7,7 +7,7 @@ export var State;
     State[State["Opening"] = 8] = "Opening";
 })(State || (State = {}));
 export function useOpenClosed() {
-    return getContext("OpenClosedContext");
+    return getContext("OpenClosedContext") ?? null;
 }
 export function createOpenClosedContext(options) {
     setContext("OpenClosedContext", options);

package/dist/label/Label.svelte

@@ -1,74 +1,21 @@
-<script lang="ts" context="module">import { setContext } from "svelte";
-const DEFAULT_LABEL_TAG = "label";
-export function useLabelContext() {
-  let context = getContext("LabelContext");
-  if (context === null) {
-    let err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useLabelContext);
-    throw err;
-  }
-  return context;
-}
-export function useLabelledBy(alwaysAvailableIds) {
-  const context = getContext("LabelContext");
-  const value = $derived(
-    (alwaysAvailableIds?.length ?? 0) > 0 ? [context?.value, ...alwaysAvailableIds].filter(Boolean).join(" ") : context?.value
-  );
-  return {
-    get value() {
-      return value;
-    }
-  };
-}
-export const useLabels = (options = {}) => {
-  const { slot, name, props, inherit } = $derived(options);
-  const parentLabelledBy = useLabelledBy();
-  let labelIds = $state([]);
-  const allLabelIds = $derived(inherit && parentLabelledBy.value ? [parentLabelledBy.value, ...labelIds] : labelIds);
-  const value = $derived(allLabelIds.length > 0 ? allLabelIds.join(" ") : void 0);
-  const context = {
-    get slot() {
-      return slot;
-    },
-    get name() {
-      return name;
-    },
-    get props() {
-      return props;
-    },
-    get value() {
-      return value;
-    },
-    register(value2) {
-      labelIds.push(value2);
-      return () => {
-        const clone = labelIds.slice();
-        const idx = clone.indexOf(value2);
-        if (idx !== -1) clone.splice(idx, 1);
-        labelIds = clone;
-        return labelIds;
-      };
-    }
-  };
-  setContext("LabelContext", context);
-  return context;
-};
+<script lang="ts" module>let DEFAULT_LABEL_TAG = "label";
 </script>
 
-<script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { getContext, onMount } from "svelte";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LABEL_TAG">import { onMount } from "svelte";
 import { getIdContext, htmlid } from "../utils/id.js";
 import { useDisabled } from "../hooks/use-disabled.js";
 import { stateFromSlot } from "../utils/state.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { useLabelContext } from "./context.svelte.js";
 const internalId = htmlid();
 const context = useLabelContext();
 const providedHtmlFor = getIdContext();
 const providedDisabled = useDisabled();
 let {
-  as,
+  ref = $bindable(),
   id = `headlessui-label-${internalId}`,
   htmlFor = providedHtmlFor,
   passive = false,
-  children,
   ...theirOriginalProps
 } = $props();
 onMount(() => {
@@ -115,6 +62,10 @@ const theirProps = $derived.by(() => {
 });
 </script>
 
-<svelte:element this={as ?? (htmlFor ? DEFAULT_LABEL_TAG : "div")} {...ourProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  defaultTag={htmlFor ? DEFAULT_LABEL_TAG : "div"}
+  name={context.name || "Label"}
+  bind:ref
+/>