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

package/dist/tabs/context.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { MutableRefObject } from "../utils/ref.svelte.js";
+export declare enum Direction {
+    Forwards = 0,
+    Backwards = 1
+}
+export declare enum Ordering {
+    Less = -1,
+    Equal = 0,
+    Greater = 1
+}
+export type TabsContext = {
+    info: {
+        isControlled: boolean;
+    };
+    selectedIndex: number;
+    orientation: "horizontal" | "vertical";
+    activation: "manual" | "auto";
+    tabs: MutableRefObject<HTMLElement | undefined>[];
+    panels: MutableRefObject<HTMLElement | undefined>[];
+    registerTab: (tab: MutableRefObject<HTMLElement | undefined>) => () => void;
+    registerPanel: (panel: MutableRefObject<HTMLElement | undefined>) => () => void;
+    change: (index: number) => void;
+};
+export declare function useTabs(component: string): TabsContext;
+export declare const createTabContext: (props: {
+    vertical: boolean;
+    manual: boolean;
+    selectedIndex: number | undefined;
+    defaultIndex: number;
+    change: (index: number) => void;
+}) => TabsContext;

package/dist/tabs/context.svelte.js

@@ -0,0 +1,134 @@
+import { sortByDomNode } from "../utils/focus-management.js";
+import { match } from "../utils/match.js";
+import { getContext, setContext } from "svelte";
+export var Direction;
+(function (Direction) {
+    Direction[Direction["Forwards"] = 0] = "Forwards";
+    Direction[Direction["Backwards"] = 1] = "Backwards";
+})(Direction || (Direction = {}));
+export var Ordering;
+(function (Ordering) {
+    Ordering[Ordering["Less"] = -1] = "Less";
+    Ordering[Ordering["Equal"] = 0] = "Equal";
+    Ordering[Ordering["Greater"] = 1] = "Greater";
+})(Ordering || (Ordering = {}));
+export function useTabs(component) {
+    const context = getContext("TabsContext");
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <TabGroup /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useTabs);
+        throw err;
+    }
+    return context;
+}
+export const createTabContext = (props) => {
+    let _selectedIndex = $state($state.snapshot(props.selectedIndex ?? props.defaultIndex));
+    let tabs = $state.raw([]);
+    let panels = $state.raw([]);
+    const isControlled = $derived(props.selectedIndex !== undefined);
+    const context = {
+        info: {
+            get isControlled() {
+                return isControlled;
+            },
+        },
+        get orientation() {
+            return props.vertical ? "vertical" : "horizontal";
+        },
+        get activation() {
+            return props.manual ? "manual" : "auto";
+        },
+        get selectedIndex() {
+            return _selectedIndex;
+        },
+        set selectedIndex(index) {
+            if (index === _selectedIndex)
+                return;
+            tabs = sortByDomNode(tabs, (tab) => tab.current ?? null);
+            panels = sortByDomNode(panels, (panel) => panel.current ?? null);
+            const focusableTabs = tabs.filter((tab) => !tab?.current?.hasAttribute("disabled"));
+            if (
+            // Underflow
+            index < 0 ||
+                // Overflow
+                index > tabs.length - 1) {
+                const direction = match(Math.sign(index - _selectedIndex), {
+                    [Ordering.Less]: () => Direction.Backwards,
+                    [Ordering.Equal]: () => {
+                        return match(Math.sign(index), {
+                            [Ordering.Less]: () => Direction.Forwards,
+                            [Ordering.Equal]: () => Direction.Forwards,
+                            [Ordering.Greater]: () => Direction.Backwards,
+                        });
+                    },
+                    [Ordering.Greater]: () => Direction.Forwards,
+                });
+                // If there are no focusable tabs then.
+                // We won't change the selected index
+                // because it's likely the user is
+                // lazy loading tabs and there's
+                // nothing to focus on yet
+                if (focusableTabs.length === 0)
+                    return;
+                const nextSelectedIndex = match(direction, {
+                    [Direction.Forwards]: () => tabs.findIndex((tab) => tab === focusableTabs[0]),
+                    [Direction.Backwards]: () => tabs.findIndex((tab) => tab === focusableTabs[focusableTabs.length - 1]),
+                });
+                if (nextSelectedIndex !== -1)
+                    _selectedIndex = nextSelectedIndex;
+                return;
+            }
+            // Middle
+            const before = tabs.slice(0, index);
+            const after = tabs.slice(index);
+            const next = [...after, ...before].find((tab) => focusableTabs.some((_tab) => _tab === tab));
+            if (!next)
+                return;
+            let selectedIndex = tabs.findIndex((tab) => tab === next) ?? _selectedIndex;
+            if (selectedIndex === -1)
+                selectedIndex = _selectedIndex;
+            if (selectedIndex !== _selectedIndex)
+                _selectedIndex = selectedIndex;
+        },
+        get tabs() {
+            return tabs;
+        },
+        get panels() {
+            return panels;
+        },
+        registerTab(tab) {
+            const unregisterTab = (tab) => {
+                tabs = tabs.filter((_tab) => _tab !== tab);
+            };
+            if (tabs.some((_tab) => _tab === tab))
+                return () => unregisterTab(tab);
+            tabs = sortByDomNode([...tabs, tab], (tab) => tab.current ?? null);
+            const activeTab = tabs[_selectedIndex];
+            // When the component is uncontrolled, then we want to maintain the actively
+            // selected tab even if new tabs are inserted or removed before the active
+            // tab.
+            //
+            // When the component is controlled, then we don't want to do this and
+            // instead we want to select the tab based on the `selectedIndex` prop.
+            if (isControlled) {
+                const selectedIndex = tabs.findIndex((tab) => tab === activeTab);
+                if (selectedIndex !== _selectedIndex)
+                    _selectedIndex = selectedIndex;
+            }
+            return () => unregisterTab(tab);
+        },
+        registerPanel(panel) {
+            const unregisterPanel = (panel) => {
+                panels = panels.filter((_panel) => _panel !== panel);
+            };
+            if (!panels.some((_panel) => _panel === panel)) {
+                panels = sortByDomNode([...panels, panel], (panel) => panel.current ?? null);
+            }
+            return () => unregisterPanel(panel);
+        },
+        change: props.change,
+    };
+    setContext("TabsContext", context);
+    return context;
+};

package/dist/textarea/Textarea.svelte

@@ -1,59 +1,90 @@
-<script lang="ts" module>const DEFAULT_TEXTAREA_TAG = "textarea";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props, PropsOf } from "../utils/types.js"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string">import { htmlid } from "../utils/id.js";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { useProvidedId } from "../utils/id.js";
-import { useLabelledBy } from "../label/context.svelte.js";
-import { useDescribedBy } from "../description/context.svelte.js";
-import { useHover } from "../hooks/use-hover.svelte.js";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const internalId = htmlid();
-const providedId = useProvidedId();
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  value = $bindable(),
-  id = providedId || `headlessui-input-${internalId}`,
-  disabled: theirDisabled = false,
-  autofocus = false,
-  invalid = false,
-  ...theirProps
-} = $props();
-const disabled = $derived(providedDisabled.current || theirDisabled);
-const labelledBy = useLabelledBy();
-const describedBy = useDescribedBy();
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
-    }
-  })
-);
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const ourProps = $derived(
-  mergeProps(
+  const DEFAULT_TEXTAREA_TAG = "textarea" as const
+
+  type TextareaRenderPropArg = {
+    disabled: boolean
+    hover: boolean
+    focus: boolean
+    autofocus: boolean
+    invalid: boolean
+  }
+  type TextareaPropsWeControl = "aria-labelledby" | "aria-describedby"
+
+  export type TextareaProps<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string> = Props<
+    TTag,
+    TextareaRenderPropArg,
+    TextareaPropsWeControl,
     {
-      id,
-      "aria-labelledby": labelledBy?.value,
-      "aria-describedby": describedBy?.value,
-      "aria-invalid": invalid ? "" : void 0,
-      disabled: disabled || void 0,
-      autofocus
-    },
-    focusProps,
-    hoverProps
+      value?: TValue
+      disabled?: boolean
+      invalid?: boolean
+      autofocus?: boolean
+    }
+  >
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string">
+  import { htmlid } from "../utils/id.js"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useProvidedId } from "../utils/id.js"
+  import { useLabelledBy } from "../label/context.svelte.js"
+  import { useDescribedBy } from "../description/context.svelte.js"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = htmlid()
+  const providedId = useProvidedId()
+  const providedDisabled = useDisabled()
+
+  let {
+    ref = $bindable(),
+    value = $bindable(),
+    id = (providedId || `headlessui-input-${internalId}`) as PropsOf<TTag>["id"],
+    disabled: theirDisabled = false,
+    autofocus = false as PropsOf<TTag>["autofocus"],
+    invalid = false,
+    ...theirProps
+  }: { as?: TTag; value?: TValue } & TextareaProps<TTag, TValue> = $props()
+  const disabled = $derived(providedDisabled.current || theirDisabled)
+
+  const labelledBy = useLabelledBy()
+  const describedBy = useDescribedBy()
+
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
   )
-);
-const slot = $derived({ disabled, invalid, hover, focus, autofocus });
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        "aria-labelledby": labelledBy?.value,
+        "aria-describedby": describedBy?.value,
+        "aria-invalid": invalid ? "" : undefined,
+        disabled: disabled || undefined,
+        autofocus,
+      },
+      focusProps,
+      hoverProps
+    )
+  )
+
+  const slot = $derived({ disabled, invalid, hover, focus, autofocus } satisfies TextareaRenderPropArg)
 </script>
 
 <ElementOrComponent

package/dist/textarea/Textarea.svelte.d.ts

@@ -18,11 +18,14 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TEXTAR
     props(): {
         as?: TTag | undefined;
         value?: TValue | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "autofocus" | "value" | TextareaPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[TextareaRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "class") | "invalid" | "disabled" | "autofocus" | "value" | TextareaPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: TextareaRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
         ref?: HTMLElement;
-    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends 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?: PropsOf<TTag>["class"] | ((bag: TextareaRenderPropArg) => string) | undefined;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: TextareaRenderPropArg) => string) | null | undefined;
     } : {}) & {
         value?: TValue | undefined;
         disabled?: boolean;