@pzerelles/headlessui-svelte 2.1.2-next.29 → 2.1.2-next.30

package/dist/tabs/TabPanels.svelte

@@ -1,23 +1,12 @@
-<script lang="ts" module>
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import type { ElementType, Props } from "../utils/types.js"
-  import { useTabs } from "./context.svelte.js"
-
-  let DEFAULT_PANELS_TAG = "div" as const
-  type PanelsRenderPropArg = {
-    selectedIndex: number
-  }
-
-  export type TabPanelsProps<TTag extends ElementType = typeof DEFAULT_PANELS_TAG> = Props<TTag, PanelsRenderPropArg>
+<script lang="ts" module>import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { useTabs } from "./context.svelte.js";
+let DEFAULT_PANELS_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANELS_TAG">
-  const context = useTabs("TabPanels")
-  const { selectedIndex } = $derived(context)
-
-  const slot = $derived({ selectedIndex } satisfies PanelsRenderPropArg)
-
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & TabPanelsProps<TTag> = $props()
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANELS_TAG">const context = useTabs("TabPanels");
+const { selectedIndex } = $derived(context);
+const slot = $derived({ selectedIndex });
+let { ref = $bindable(), ...theirProps } = $props();
 </script>
 
 <ElementOrComponent {theirProps} {slot} defaultTag={DEFAULT_PANELS_TAG} name="TabPanel" bind:ref />

package/dist/textarea/Textarea.svelte

@@ -1,90 +1,59 @@
-<script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-
-  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,
-    {
-      value?: TValue
-      disabled?: boolean
-      invalid?: boolean
-      autofocus?: boolean
-    }
-  >
+<script lang="ts" module>const DEFAULT_TEXTAREA_TAG = "textarea";
 </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 { 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
-    )
+<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(
+    {
+      id,
+      "aria-labelledby": labelledBy?.value,
+      "aria-describedby": describedBy?.value,
+      "aria-invalid": invalid ? "" : void 0,
+      disabled: disabled || void 0,
+      autofocus
+    },
+    focusProps,
+    hoverProps
   )
-
-  const slot = $derived({ disabled, invalid, hover, focus, autofocus } satisfies TextareaRenderPropArg)
+);
+const slot = $derived({ disabled, invalid, hover, focus, autofocus });
 </script>
 
 <ElementOrComponent

package/dist/transition/InternalTransitionChild.svelte

@@ -1,267 +1,178 @@
-<script lang="ts" module>
-  import { compact, RenderStrategy } from "../utils/render.js"
-  import type { ElementType } from "../utils/types.js"
-  import { onMount, setContext, untrack } from "svelte"
-  import {
-    hasChildren,
-    TreeStates,
-    useNesting,
-    useParentNesting,
-    useTransitionContext,
-    type NestingContextValues,
-    type TransitionDirection,
-  } from "./context.svelte.js"
-  import type { TransitionRootProps } from "./Transition.svelte"
-  import { match } from "../utils/match.js"
-  import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js"
-  import { classNames } from "../utils/class-names.js"
-  import { createOpenClosedContext, State } from "../internal/open-closed.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { DEFAULT_TRANSITION_CHILD_TAG, type TransitionChildProps } from "./TransitionChild.svelte"
-
-  /**
-   * Check if we should forward the ref to the child element or not. This is to
-   * prevent crashes when the `as` prop is a Fragment _and_ the component just acts
-   * as a state container (aka, there is no actual transition happening).
-   *
-   * E.g.:
-   *
-   * ```tsx
-   * <Transition show={true}>
-   *   <Transition.Child enter="duration-100"><div>Child 1</div></Transition.Child>
-   *   <Transition.Child enter="duration-200"><div>Child 2</div></Transition.Child>
-   * </Transition>
-   * ```
-   *
-   * In this scenario, the child components are transitioning, but the
-   * `Transition` parent, which is a `Fragment`, is not. So we should not forward
-   * the ref to the `Fragment`.
-   */
-  export function shouldForwardRef<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(
-    props: TransitionRootProps<TTag>
-  ) {
-    return (
-      // If we have any of the enter/leave classes
-      Boolean(props.enter || props.enterFrom || props.enterTo || props.leave || props.leaveFrom || props.leaveTo) ||
-      // If the `as` prop is not a Fragment
-      (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== "svelte:fragment" ||
-      // If we have a single child, then we can forward the ref directly
-      props.children !== undefined
-    )
-  }
+<script lang="ts" module>import { compact, RenderStrategy } from "../utils/render.js";
+import { onMount, setContext, untrack } from "svelte";
+import {
+  hasChildren,
+  TreeStates,
+  useNesting,
+  useParentNesting,
+  useTransitionContext
+} from "./context.svelte.js";
+import { match } from "../utils/match.js";
+import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js";
+import { classNames } from "../utils/class-names.js";
+import { createOpenClosedContext, State } from "../internal/open-closed.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { DEFAULT_TRANSITION_CHILD_TAG } from "./TransitionChild.svelte";
+export function shouldForwardRef(props) {
+  return (
+    // If we have any of the enter/leave classes
+    Boolean(props.enter || props.enterFrom || props.enterTo || props.leave || props.leaveFrom || props.leaveTo) || // If the `as` prop is not a Fragment
+    (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== "svelte:fragment" || // If we have a single child, then we can forward the ref directly
+    props.children !== void 0
+  );
+}
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">
-  let { ref = $bindable(), ..._props }: { as?: TTag } & TransitionChildProps<TTag> = $props()
-  const {
-    // Whether or not to enable transitions on the current element (by exposing
-    // transition data). When set to false, the `Transition` component still
-    // acts as a transition boundary for `TransitionChild` components.
-    transition = true,
-
-    // Event "handlers"
-    beforeEnter,
-    afterEnter,
-    beforeLeave,
-    afterLeave,
-
-    // Class names
-    enter,
-    enterFrom,
-    enterTo,
-    entered,
-    leave,
-    leaveFrom,
-    leaveTo,
-
-    ...theirProps
-  } = $derived(_props)
-  let containerElement = $state<HTMLElement>()
-  let container = $state<{ current: HTMLElement | null }>({ current: null })
-  const requiresRef = $derived(shouldForwardRef(_props))
-
-  const strategy = $derived((theirProps.unmount ?? true) ? RenderStrategy.Unmount : RenderStrategy.Hidden)
-
-  const _transitionContext = useTransitionContext()
-  const { show, appear, initial } = $derived(_transitionContext)
-
-  let _state = $state(untrack(() => show) ? TreeStates.Visible : TreeStates.Hidden)
-
-  const parentNesting = useParentNesting()
-  const { register, unregister } = $derived(parentNesting)
-
-  onMount(() => {
-    if (requiresRef) {
-      container.current = ref ?? null
-      containerElement = ref
-    }
-
-    return register(container)
-  })
-
-  $effect(() => {
-    // If we are in another mode than the Hidden mode then ignore
-    if (strategy !== RenderStrategy.Hidden) return
-    if (!container.current) return
-
-    // Make sure that we are visible
-    if (show && _state !== TreeStates.Visible) {
-      _state = TreeStates.Visible
-      return
-    }
-
-    match(_state, {
-      [TreeStates.Hidden]: () => unregister(container),
-      [TreeStates.Visible]: () => register(container),
-    })
-  })
-  //[state, container, register, unregister, show, strategy]
-
-  $effect(() => {
-    if (!requiresRef) return
-
-    if (_state === TreeStates.Visible && container.current === null) {
-      throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")
-    }
-  })
-
-  // Skipping initial transition
-  const skip = $derived(initial && !appear)
-  const immediate = $derived(appear && show && initial)
-
-  let isTransitioning = $state(false)
-
-  let nesting = useNesting({
-    done: () => {
-      // When all children have been unmounted we can only hide ourselves if and
-      // only if we are not transitioning ourselves. Otherwise we would unmount
-      // before the transitions are finished.
-      if (isTransitioning) return
-
-      _state = TreeStates.Hidden
-      unregister(container)
-    },
-    get parent() {
-      return parentNesting
-    },
-  })
-
-  const start = (show: boolean) => {
-    isTransitioning = true
-    const direction: TransitionDirection = show ? "enter" : "leave"
-
-    nesting.onStart(container, direction, (direction) => {
-      if (direction === "enter") beforeEnter?.()
-      else if (direction === "leave") beforeLeave?.()
-    })
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">let { ref = $bindable(), ..._props } = $props();
+const {
+  // Whether or not to enable transitions on the current element (by exposing
+  // transition data). When set to false, the `Transition` component still
+  // acts as a transition boundary for `TransitionChild` components.
+  transition = true,
+  // Event "handlers"
+  beforeEnter,
+  afterEnter,
+  beforeLeave,
+  afterLeave,
+  // Class names
+  enter,
+  enterFrom,
+  enterTo,
+  entered,
+  leave,
+  leaveFrom,
+  leaveTo,
+  ...theirProps
+} = $derived(_props);
+let containerElement = $state();
+let container = $state({ current: null });
+const requiresRef = $derived(shouldForwardRef(_props));
+const strategy = $derived(theirProps.unmount ?? true ? RenderStrategy.Unmount : RenderStrategy.Hidden);
+const _transitionContext = useTransitionContext();
+const { show, appear, initial } = $derived(_transitionContext);
+let _state = $state(untrack(() => show) ? TreeStates.Visible : TreeStates.Hidden);
+const parentNesting = useParentNesting();
+const { register, unregister } = $derived(parentNesting);
+onMount(() => {
+  if (requiresRef) {
+    container.current = ref ?? null;
+    containerElement = ref;
   }
-
-  const end = (show: boolean) => {
-    let direction: TransitionDirection = show ? "enter" : "leave"
-
-    isTransitioning = false
-    nesting.onStop(container, direction, (direction) => {
-      if (direction === "enter") afterEnter?.()
-      else if (direction === "leave") afterLeave?.()
-    })
-
-    if (direction === "leave" && !hasChildren(nesting)) {
-      // When we don't have children anymore we can safely unregister from the
-      // parent and hide ourselves.
-      _state = TreeStates.Hidden
-      unregister(container)
-    }
+  return register(container);
+});
+$effect(() => {
+  if (strategy !== RenderStrategy.Hidden) return;
+  if (!container.current) return;
+  if (show && _state !== TreeStates.Visible) {
+    _state = TreeStates.Visible;
+    return;
   }
-
-  $effect(() => {
-    if (requiresRef && transition) return
-
-    // When we don't transition, then we can complete the transition
-    // immediately.
-    untrack(() => start(show))
-    untrack(() => end(show))
-  })
-
-  const enabled = $derived.by(() => {
-    // Should the current component transition? If not, then we can still
-    // orchestrate the child transitions.
-    if (!transition) return false
-
-    // If we don't require a ref, then we can't transition.
-    if (!requiresRef) return false
-
-    // If the server handoff isn't completed yet, we can't transition.
-    //if (!ready) return false
-
-    // If we start in a `show` state but without the `appear` prop, then we skip
-    // the initial transition.
-    if (skip) return false
-
-    return true
-  })
-
-  // Ignoring the `visible` state because this doesn't handle the hierarchy. If
-  // a leave transition on the `<Transition>` is done, but there is still a
-  // child `<TransitionChild>` busy, then `visible` would be `false`, while
-  // `state` would still be `TreeStates.Visible`.
-  const _transition = useTransition({
-    get enabled() {
-      return enabled
-    },
-    get element() {
-      return containerElement
-    },
-    get show() {
-      return show
-    },
-    events: { start, end },
-  })
-  const { data: transitionData } = $derived(_transition)
-
-  const ourProps = $derived(
-    compact({
-      class:
-        classNames(
-          // Incoming classes if any
-          // all components accept className (but all HTML elements do)
-          theirProps.class,
-
-          // Apply these classes immediately
-          immediate && enter,
-          immediate && enterFrom,
-
-          // Map data attributes to `enter`, `enterFrom` and `enterTo` classes
-          transitionData.enter && enter,
-          transitionData.enter && transitionData.closed && enterFrom,
-          transitionData.enter && !transitionData.closed && enterTo,
-
-          // Map data attributes to `leave`, `leaveFrom` and `leaveTo` classes
-          transitionData.leave && leave,
-          transitionData.leave && !transitionData.closed && leaveFrom,
-          transitionData.leave && transitionData.closed && leaveTo,
-
-          // Map data attributes to `entered` class (backwards compatibility)
-          !transitionData.transition && show && entered
-        )?.trim() || undefined, // If `class` is an empty string, we can omit it
-      ...transitionDataAttributes(transitionData),
-    })
-  )
-
-  const openClosedState = $derived.by(() => {
-    let openClosedState = 0
-    if (_state === TreeStates.Visible) openClosedState |= State.Open
-    if (_state === TreeStates.Hidden) openClosedState |= State.Closed
-    if (transitionData.enter) openClosedState |= State.Opening
-    if (transitionData.leave) openClosedState |= State.Closing
-    return openClosedState
-  })
-
-  createOpenClosedContext({
-    get value() {
-      return openClosedState
-    },
+  match(_state, {
+    [TreeStates.Hidden]: () => unregister(container),
+    [TreeStates.Visible]: () => register(container)
+  });
+});
+$effect(() => {
+  if (!requiresRef) return;
+  if (_state === TreeStates.Visible && container.current === null) {
+    throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?");
+  }
+});
+const skip = $derived(initial && !appear);
+const immediate = $derived(appear && show && initial);
+let isTransitioning = $state(false);
+let nesting = useNesting({
+  done: () => {
+    if (isTransitioning) return;
+    _state = TreeStates.Hidden;
+    unregister(container);
+  },
+  get parent() {
+    return parentNesting;
+  }
+});
+const start = (show2) => {
+  isTransitioning = true;
+  const direction = show2 ? "enter" : "leave";
+  nesting.onStart(container, direction, (direction2) => {
+    if (direction2 === "enter") beforeEnter?.();
+    else if (direction2 === "leave") beforeLeave?.();
+  });
+};
+const end = (show2) => {
+  let direction = show2 ? "enter" : "leave";
+  isTransitioning = false;
+  nesting.onStop(container, direction, (direction2) => {
+    if (direction2 === "enter") afterEnter?.();
+    else if (direction2 === "leave") afterLeave?.();
+  });
+  if (direction === "leave" && !hasChildren(nesting)) {
+    _state = TreeStates.Hidden;
+    unregister(container);
+  }
+};
+$effect(() => {
+  if (requiresRef && transition) return;
+  untrack(() => start(show));
+  untrack(() => end(show));
+});
+const enabled = $derived.by(() => {
+  if (!transition) return false;
+  if (!requiresRef) return false;
+  if (skip) return false;
+  return true;
+});
+const _transition = useTransition({
+  get enabled() {
+    return enabled;
+  },
+  get element() {
+    return containerElement;
+  },
+  get show() {
+    return show;
+  },
+  events: { start, end }
+});
+const { data: transitionData } = $derived(_transition);
+const ourProps = $derived(
+  compact({
+    class: classNames(
+      // Incoming classes if any
+      // all components accept className (but all HTML elements do)
+      theirProps.class,
+      // Apply these classes immediately
+      immediate && enter,
+      immediate && enterFrom,
+      // Map data attributes to `enter`, `enterFrom` and `enterTo` classes
+      transitionData.enter && enter,
+      transitionData.enter && transitionData.closed && enterFrom,
+      transitionData.enter && !transitionData.closed && enterTo,
+      // Map data attributes to `leave`, `leaveFrom` and `leaveTo` classes
+      transitionData.leave && leave,
+      transitionData.leave && !transitionData.closed && leaveFrom,
+      transitionData.leave && transitionData.closed && leaveTo,
+      // Map data attributes to `entered` class (backwards compatibility)
+      !transitionData.transition && show && entered
+    )?.trim() || void 0,
+    // If `class` is an empty string, we can omit it
+    ...transitionDataAttributes(transitionData)
   })
-  setContext<NestingContextValues>("NestingContext", nesting)
+);
+const openClosedState = $derived.by(() => {
+  let openClosedState2 = 0;
+  if (_state === TreeStates.Visible) openClosedState2 |= State.Open;
+  if (_state === TreeStates.Hidden) openClosedState2 |= State.Closed;
+  if (transitionData.enter) openClosedState2 |= State.Opening;
+  if (transitionData.leave) openClosedState2 |= State.Closing;
+  return openClosedState2;
+});
+createOpenClosedContext({
+  get value() {
+    return openClosedState;
+  }
+});
+setContext("NestingContext", nesting);
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_TRANSITION_CHILD_TAG} name="TransitionChild" bind:ref />