@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.1-next.1

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

@@ -14,6 +14,6 @@ declare const Portal: $$__sveltets_2_IsomorphicComponent<{
     children: Snippet;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, Record<string, any>, "">;
+}, {}, {}, "">;
 type Portal = InstanceType<typeof Portal>;
 export default Portal;

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

@@ -0,0 +1,57 @@
+import { useInteractions, type UseFloatingReturn } from "@skeletonlabs/floating-ui-svelte";
+type Align = "start" | "end";
+type Placement = "top" | "right" | "bottom" | "left";
+type BaseAnchorProps = {
+    /**
+     * The `gap` is the space between the trigger and the panel.
+     */
+    gap: number | string;
+    /**
+     * The `offset` is the amount the panel should be nudged from its original position.
+     */
+    offset: number | string;
+    /**
+     * The `padding` is the minimum space between the panel and the viewport.
+     */
+    padding: number | string;
+};
+export type AnchorProps = false | (`${Placement}` | `${Placement} ${Align}`) | Partial<BaseAnchorProps & {
+    /**
+     * The `to` value defines which side of the trigger the panel should be placed on and its
+     * alignment.
+     */
+    to: `${Placement}` | `${Placement} ${Align}`;
+}>;
+export type AnchorPropsWithSelection = false | (`${Placement | "selection"}` | `${Placement | "selection"} ${Align}`) | Partial<BaseAnchorProps & {
+    /**
+     * The `to` value defines which side of the trigger the panel should be placed on and its
+     * alignment.
+     */
+    to: `${Placement | "selection"}` | `${Placement | "selection"} ${Align}`;
+}>;
+export type InternalFloatingPanelProps = Partial<{
+    inner: {};
+}>;
+type FloatingContext = {
+    styles?: UseFloatingReturn["floatingStyles"];
+    setReference: (reference: HTMLElement | null | undefined) => void;
+    setFloating: (floating: HTMLElement | null | undefined) => void;
+    getReferenceProps: ReturnType<typeof useInteractions>["getReferenceProps"];
+    getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
+    slot: Partial<{
+        anchor: `${Placement | "selection"}` | `${Placement | "selection"} ${Align}`;
+    }>;
+};
+export declare function useResolvedAnchor<T extends AnchorProps | AnchorPropsWithSelection>(anchor?: T): Exclude<T, boolean | string> | null;
+export declare function useFloating(): FloatingContext;
+export declare function useFloatingPanelProps(): (userProps?: import("svelte/elements").HTMLAttributes<Element> | undefined) => Record<string, unknown> & {
+    "data-anchor": Placement | "top start" | "top end" | "right start" | "right end" | "bottom start" | "bottom end" | "left start" | "left end" | "selection" | "selection start" | "selection end" | undefined;
+};
+export declare function useFloatingPanel(placement?: (AnchorPropsWithSelection & InternalFloatingPanelProps) | null): {
+    readonly setFloating: (floating: HTMLElement | null | undefined) => void;
+    readonly style: string | undefined;
+};
+export declare const createFloatingContext: ({ enabled }?: {
+    enabled?: boolean;
+}) => FloatingContext;
+export {};

package/dist/internal/floating.svelte.js

@@ -0,0 +1,477 @@
+import { useDisposables } from "../utils/disposables.js";
+import { useRef } from "../utils/ref.svelte.js";
+import { autoUpdate, 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";
+export function useResolvedAnchor(anchor) {
+    if (!anchor)
+        return null; // Disable entirely
+    if (typeof anchor === "string")
+        return { to: anchor }; // Simple string based value,
+    return anchor; // User-provided value
+}
+export function useFloating() {
+    return getContext("FloatingContext");
+}
+export function useFloatingPanelProps() {
+    let { 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
+    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 context = getContext("FloatingContext");
+    return {
+        get setFloating() {
+            return context.setFloating;
+        },
+        get style() {
+            return placement ? context.styles : undefined;
+        },
+    };
+}
+// TODO: Make this a config part of the `config`. Just need to decide on a name.
+let MINIMUM_ITEMS_VISIBLE = 4;
+export const createFloatingContext = ({ enabled = true } = {}) => {
+    let config = $state(null);
+    let innerOffset = $state(0);
+    let overflowRef = useRef(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({
+        get config() {
+            return config;
+        },
+        get element() {
+            return floatingEl;
+        },
+    });
+    let [to, align = "center"] = placement.split(" ");
+    // Reset
+    $effect(() => {
+        if (!isEnabled)
+            return;
+        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
+                        })
+                      }
+                    },
+                  })*/
+                : 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,
+    }));
+    // Calculate placement information to expose as data attributes
+    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.
+    if (to === "selection")
+        exposedTo = "selection";
+    const data = $derived({
+        anchor: [exposedTo, exposedAlign].filter(Boolean).join(" "),
+    });
+    /*let innerOffsetConfig = useInnerOffset(context, {
+        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 floatingContext = {
+        setFloating: setFloatingRef,
+        setReference: (reference) => {
+            elements.reference = reference;
+        },
+        get styles() {
+            return floatingStyles;
+        },
+        getReferenceProps,
+        getFloatingProps,
+        get slot() {
+            return data;
+        },
+    };
+    setContext("FloatingContext", floatingContext);
+    setContext("PlacementContext", null);
+    return floatingContext;
+};
+function useFixScrollingPixel(element) {
+    if (!element)
+        return;
+    let observer = new MutationObserver(() => {
+        let maxHeight = window.getComputedStyle(element).maxHeight;
+        let maxHeightFloat = parseFloat(maxHeight);
+        if (isNaN(maxHeightFloat))
+            return;
+        let maxHeightInt = parseInt(maxHeight);
+        if (isNaN(maxHeightInt))
+            return;
+        if (maxHeightFloat !== maxHeightInt) {
+            element.style.maxHeight = `${Math.ceil(maxHeightFloat)}px`;
+        }
+    });
+    observer.observe(element, {
+        attributes: true,
+        attributeFilter: ["style"],
+    });
+    return () => {
+        observer.disconnect();
+    };
+}
+function useResolvedConfig({ config, element, }) {
+    const gap = useResolvePxValue({
+        get input() {
+            return config?.gap ?? "var(--anchor-gap, 0)";
+        },
+        get element() {
+            return element;
+        },
+    });
+    const offset = useResolvePxValue({
+        get input() {
+            return config?.gap ?? "var(--anchor-offset, 0)";
+        },
+        get element() {
+            return element;
+        },
+    });
+    const padding = useResolvePxValue({
+        get input() {
+            return config?.gap ?? "var(--anchor-padding, 0)";
+        },
+        get element() {
+            return element;
+        },
+    });
+    return {
+        ...config,
+        get gap() {
+            return gap.value;
+        },
+        get offset() {
+            return offset.value;
+        },
+        get padding() {
+            return padding.value;
+        },
+    };
+}
+function useResolvePxValue({ input, element, defaultValue, }) {
+    let d = useDisposables();
+    const computeValue = (value, element) => {
+        // Nullish
+        if (value == null)
+            return [defaultValue, null];
+        // Number as-is
+        if (typeof value === "number")
+            return [value, null];
+        // String values, the interesting part
+        if (typeof value === "string") {
+            if (!element)
+                return [defaultValue, null];
+            let result = resolveCSSVariablePxValue(value, element);
+            return [
+                result,
+                (setValue) => {
+                    let variables = resolveVariables(value);
+                    // TODO: Improve this part and make it work
+                    //
+                    // Observe variables themselves. Currently the browser doesn't support this, but the
+                    // variables we are interested in resolve to a pixel value. Which means that we can use
+                    // this variable in the `margin` of an element. Then we can observe the `margin` of the
+                    // element and we will be notified when the variable changes.
+                    //
+                    // if (typeof ResizeObserver !== 'undefined') {
+                    //   let tmpEl = document.createElement('div')
+                    //   element.appendChild(tmpEl)
+                    //
+                    //   // Didn't use `fontSize` because a `fontSize` can't be negative.
+                    //   tmpEl.style.setProperty('margin-top', '0px', 'important')
+                    //
+                    //   // Set the new value, if this is invalid the previous value will be used.
+                    //   tmpEl.style.setProperty('margin-top', value, 'important')
+                    //
+                    //   let observer = new ResizeObserver(() => {
+                    //     let newResult = resolveCSSVariableValue(value, element)
+                    //
+                    //     if (result !== newResult) {
+                    //       setValue(newResult)
+                    //       result = newResult
+                    //     }
+                    //   })
+                    //   observer.observe(tmpEl)
+                    //   d.add(() => observer.disconnect())
+                    //   return d.dispose
+                    // }
+                    // Works as a fallback, but not very performant because we are polling the value.
+                    {
+                        let history = variables.map((variable) => window.getComputedStyle(element).getPropertyValue(variable));
+                        d.requestAnimationFrame(function check() {
+                            d.nextFrame(check);
+                            // Fast path, detect if the value of the CSS Variable has changed before completely
+                            // computing the new value. Once we use `resolveCSSVariablePxValue` we will have to
+                            // compute the actual px value by injecting a temporary element into the DOM.
+                            //
+                            // This is a lot of work, so we want to avoid it if possible.
+                            let changed = false;
+                            for (let [idx, variable] of variables.entries()) {
+                                let value = window.getComputedStyle(element).getPropertyValue(variable);
+                                if (history[idx] !== value) {
+                                    history[idx] = value;
+                                    changed = true;
+                                    break;
+                                }
+                            }
+                            // Nothing changed, no need to perform the expensive computation.
+                            if (!changed)
+                                return;
+                            let newResult = resolveCSSVariablePxValue(value, element);
+                            if (result !== newResult) {
+                                setValue(newResult);
+                                result = newResult;
+                            }
+                        });
+                    }
+                    return d.dispose;
+                },
+            ];
+        }
+        return [defaultValue, null];
+    };
+    // Calculate the value immediately when the input or element changes. Later we can setup a watcher
+    // to track the value changes over time.
+    const immediateValue = computeValue(input, element)[0];
+    let value = $state(immediateValue);
+    $effect(() => {
+        let [newValue, watcher] = computeValue(input, element);
+        value = newValue;
+        if (!watcher)
+            return;
+        return watcher((_value) => (value = _value));
+    });
+    return {
+        get value() {
+            return value;
+        },
+    };
+}
+function resolveVariables(value) {
+    let matches = /var\((.*)\)/.exec(value);
+    if (matches) {
+        let idx = matches[1].indexOf(",");
+        if (idx === -1) {
+            return [matches[1]];
+        }
+        let variable = matches[1].slice(0, idx).trim();
+        let fallback = matches[1].slice(idx + 1).trim();
+        if (fallback) {
+            return [variable, ...resolveVariables(fallback)];
+        }
+        return [variable];
+    }
+    return [];
+}
+function resolveCSSVariablePxValue(input, element) {
+    // Resolve the value: Instead of trying to compute the value ourselves by converting rem /
+    // vwh / ... values to pixels or by parsing out the fallback values and evaluating it
+    // (because it can contain calc expressions or other variables).
+    //
+    // We will let the browser compute all of it by creating a temporary element and setting
+    // the value as a CSS variable. Then we can read the computed value from the browser.
+    //
+    //
+    // BUG REPORT ABOUT INCORRECT VALUES, look here:
+    // ---------------------------------------------
+    //
+    // Currently this technically contains a bug because we are rendering a new element inside of the
+    // current element. Which means that if the passed in element has CSS that looks like:
+    //
+    // ```css
+    // .the-element {
+    //   --the-variable: 1rem
+    // }
+    //
+    // .the-element > * {
+    //   --the-variable: 2rem
+    // }
+    // ```
+    //
+    // Then this will result to resolved value of `2rem`, instead of `1rem`
+    let tmpEl = document.createElement("div");
+    element.appendChild(tmpEl);
+    // Set the value to `0px` otherwise if an invalid value is provided later the browser will read
+    // out the default value.
+    //
+    // Didn't use `fontSize` because a `fontSize` can't be negative.
+    tmpEl.style.setProperty("margin-top", "0px", "important");
+    // Set the new value, if this is invalid the previous value will be used.
+    tmpEl.style.setProperty("margin-top", input, "important");
+    // Reading the `margin-top` will already be in pixels (e.g.: 123px).
+    let pxValue = parseFloat(window.getComputedStyle(tmpEl).marginTop) || 0;
+    element.removeChild(tmpEl);
+    return pxValue;
+}

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

@@ -0,0 +1,6 @@
+export declare function useFrozenData<T>(options: {
+    freeze: boolean;
+    data: T;
+}): {
+    readonly data: T;
+};

package/dist/internal/frozen.svelte.js

@@ -0,0 +1,18 @@
+import { untrack } from "svelte";
+export function useFrozenData(options) {
+    const { freeze, data } = $derived(options);
+    let frozenValue = $state(data);
+    $effect(() => {
+        // We should keep updating the frozen value, as long as we shouldn't freeze
+        // the value yet. The moment we should freeze the value we stop updating it
+        // which allows us to reference the "previous" (thus frozen) value.
+        if (!freeze && untrack(() => frozenValue) !== data) {
+            frozenValue = data;
+        }
+    });
+    return {
+        get data() {
+            return freeze ? frozenValue : data;
+        },
+    };
+}

package/dist/internal/id.d.ts

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

package/dist/internal/id.js

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

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

@@ -0,0 +1,14 @@
+export declare enum State {
+    Open = 1,
+    Closed = 2,
+    Closing = 4,
+    Opening = 8
+}
+export type OpenClosedContext = {
+    readonly value: State;
+};
+export declare function useOpenClosed(): OpenClosedContext;
+export declare function createOpenClosedContext(options: {
+    readonly value: State;
+}): void;
+export declare function clearOpenClosedContext(): void;

package/dist/internal/open-closed.js

@@ -0,0 +1,17 @@
+import { getContext, setContext } from "svelte";
+export var State;
+(function (State) {
+    State[State["Open"] = 1] = "Open";
+    State[State["Closed"] = 2] = "Closed";
+    State[State["Closing"] = 4] = "Closing";
+    State[State["Opening"] = 8] = "Opening";
+})(State || (State = {}));
+export function useOpenClosed() {
+    return getContext("OpenClosedContext");
+}
+export function createOpenClosedContext(options) {
+    setContext("OpenClosedContext", options);
+}
+export function clearOpenClosedContext() {
+    setContext("OpenClosedContext", undefined);
+}

package/dist/internal/portal-force-root.svelte.d.ts

@@ -0,0 +1,6 @@
+type ForcePortalRootContext = {
+    readonly force: boolean;
+};
+export declare function usePortalRoot(): ForcePortalRootContext;
+export declare function createPortalRoot(context: ForcePortalRootContext): void;
+export {};

package/dist/internal/portal-force-root.svelte.js

@@ -0,0 +1,11 @@
+import { getContext, setContext } from "svelte";
+export function usePortalRoot() {
+    return getContext("ForcePortalRootContext");
+}
+export function createPortalRoot(context) {
+    setContext("ForcePortalRootContext", {
+        get force() {
+            return context.force;
+        },
+    });
+}