@pzerelles/headlessui-svelte 2.1.2-next.31 → 2.1.2-next.32

package/dist/switch/Switch.svelte

@@ -1,143 +1,190 @@
-<script lang="ts" module>const DEFAULT_SWITCH_TAG = "button";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props, PropsOf } from "../utils/types.js"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SWITCH_TAG">import { useId } from "../hooks/use-id.js";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { useProvidedId } from "../utils/id.js";
-import { getContext, tick } from "svelte";
-import { attemptSubmit } from "../utils/form.js";
-import { useLabelledBy } from "../label/context.svelte.js";
-import { useDescribedBy } from "../description/context.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import { useHover } from "../hooks/use-hover.svelte.js";
-import { useActivePress } from "../hooks/use-active-press.svelte.js";
-import { useControllable } from "../hooks/use-controllable.svelte.js";
-import FormFields from "../internal/FormFields.svelte";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const internalId = useId();
-const providedId = useProvidedId();
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  id = providedId || `headlessui-switch-${internalId}`,
-  disabled: theirDisabled = false,
-  checked: controlledChecked = $bindable(),
-  defaultChecked: _defaultChecked,
-  onchange: controlledOnChange,
-  name,
-  value,
-  form,
-  autofocus = false,
-  tabIndex,
-  ...theirProps
-} = $props();
-const disabled = $derived(providedDisabled.current ?? theirDisabled);
-const groupContext = getContext("GroupContext");
-$effect(() => {
-  if (groupContext) groupContext.switchElement = ref ?? null;
-});
-const defaultChecked = _defaultChecked;
-const controllable = useControllable(
-  {
-    get controlledValue() {
-      return controlledChecked;
-    },
-    set controlledValue(checked2) {
-      controlledChecked = checked2;
-    }
-  },
-  controlledOnChange,
-  defaultChecked ?? false
-);
-const { value: checked, onchange } = $derived(controllable);
-let changing = $state(false);
-const toggle = () => {
-  changing = true;
-  onchange?.(!checked);
-  tick().then(() => {
-    changing = false;
-  });
-};
-const handleClick = (event) => {
-  event.preventDefault();
-  toggle();
-};
-const handleKeyUp = (event) => {
-  if (event.key === " ") {
-    event.preventDefault();
-    toggle();
-  } else if (event.key === "Enter") {
-    attemptSubmit(event.currentTarget);
+  const DEFAULT_SWITCH_TAG = "button" as const
+  type SwitchRenderPropArg = {
+    checked: boolean
+    hover: boolean
+    focus: boolean
+    active: boolean
+    autofocus: boolean
+    changing: boolean
+    disabled: boolean
   }
-};
-const handleKeyPress = (event) => event.preventDefault();
-let labelledBy = useLabelledBy();
-let describedBy = useDescribedBy();
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
-    }
-  })
-);
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
+  type SwitchPropsWeControl = "aria-checked" | "aria-describedby" | "aria-labelledby" | "role"
+
+  export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> = Props<
+    TTag,
+    SwitchRenderPropArg,
+    SwitchPropsWeControl,
+    {
+      checked?: boolean
+      defaultChecked?: boolean
+      onchange?(checked: boolean): void
+      name?: string
+      value?: string
+      form?: string
+      autofocus?: boolean
+      disabled?: boolean
+      tabIndex?: number
     }
+  >
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SWITCH_TAG">
+  import { useId } from "../hooks/use-id.js"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useProvidedId } from "../utils/id.js"
+  import { getContext, tick } from "svelte"
+  import type { GroupContext } from "./SwitchGroup.svelte"
+  import { attemptSubmit } from "../utils/form.js"
+  import { useLabelledBy } from "../label/context.svelte.js"
+  import { useDescribedBy } from "../description/context.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { useActivePress } from "../hooks/use-active-press.svelte.js"
+  import { useControllable } from "../hooks/use-controllable.svelte.js"
+  import FormFields from "../internal/FormFields.svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = useId()
+  const providedId = useProvidedId()
+  const providedDisabled = useDisabled()
+  let {
+    ref = $bindable(),
+    id = (providedId || `headlessui-switch-${internalId}`) as PropsOf<TTag>["id"],
+    disabled: theirDisabled = false,
+    checked: controlledChecked = $bindable(),
+    defaultChecked: _defaultChecked,
+    onchange: controlledOnChange,
+    name,
+    value,
+    form,
+    autofocus = false,
+    tabIndex,
+    ...theirProps
+  }: { as?: TTag } & SwitchProps<TTag> = $props()
+  const disabled = $derived(providedDisabled.current ?? theirDisabled)
+  const groupContext = getContext<GroupContext>("GroupContext")
+  $effect(() => {
+    if (groupContext) groupContext.switchElement = ref ?? null
   })
-);
-const { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
+
+  const defaultChecked = _defaultChecked
+  const controllable = useControllable(
+    {
+      get controlledValue() {
+        return controlledChecked
+      },
+      set controlledValue(checked) {
+        controlledChecked = checked
+      },
+    },
+    controlledOnChange,
+    defaultChecked ?? false
+  )
+  const { value: checked, onchange } = $derived(controllable)
+
+  let changing = $state(false)
+
+  const toggle = () => {
+    changing = true
+    onchange?.(!checked)
+    tick().then(() => {
+      changing = false
+    })
+  }
+
+  const handleClick = (event: MouseEvent) => {
+    //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
+    event.preventDefault()
+    toggle()
+  }
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    if (event.key === " ") {
+      event.preventDefault()
+      toggle()
+    } else if (event.key === "Enter") {
+      attemptSubmit(event.currentTarget as HTMLElement)
     }
-  })
-);
-const slot = $derived({
-  checked,
-  disabled,
-  hover,
-  focus,
-  active,
-  autofocus,
-  changing
-});
-const buttonType = useResolveButtonType({
-  get props() {
-    return { type: theirProps.type, as: theirProps.as };
-  },
-  get ref() {
-    return { current: ref };
   }
-});
-const ourProps = $derived(
-  mergeProps(
-    {
-      id,
-      role: "switch",
-      type: buttonType.type,
-      tabIndex: tabIndex === -1 ? 0 : tabIndex ?? 0,
-      "aria-checked": checked,
-      "aria-labelledby": labelledBy.value,
-      "aria-describedby": describedBy.value,
-      disabled: disabled || void 0,
-      autofocus,
-      onclick: handleClick,
-      onkeyup: handleKeyUp,
-      onkeypress: handleKeyPress
+
+  // This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
+  const handleKeyPress = (event: KeyboardEvent) => event.preventDefault()
+
+  let labelledBy = useLabelledBy()
+  let describedBy = useDescribedBy()
+
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
+  )
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+  const { pressed: active, pressProps } = $derived(
+    useActivePress({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+
+  const slot = $derived({
+    checked,
+    disabled,
+    hover,
+    focus,
+    active,
+    autofocus,
+    changing,
+  } satisfies SwitchRenderPropArg)
+
+  const buttonType = useResolveButtonType({
+    get props() {
+      return { type: theirProps.type, as: theirProps.as }
+    },
+    get ref() {
+      return { current: ref }
     },
-    focusProps,
-    hoverProps,
-    pressProps
+  })
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        role: "switch",
+        type: buttonType.type,
+        tabIndex: tabIndex === -1 ? 0 : (tabIndex ?? 0),
+        "aria-checked": checked,
+        "aria-labelledby": labelledBy.value,
+        "aria-describedby": describedBy.value,
+        disabled: disabled || undefined,
+        autofocus,
+        onclick: handleClick,
+        onkeyup: handleKeyUp,
+        onkeypress: handleKeyPress,
+      },
+      focusProps,
+      hoverProps,
+      pressProps
+    )
   )
-);
-const reset = $derived(() => {
-  if (defaultChecked === void 0) return;
-  return onchange?.(defaultChecked);
-});
+
+  const reset = $derived(() => {
+    if (defaultChecked === undefined) return
+    return onchange?.(defaultChecked)
+  })
 </script>
 
 {#if name}

package/dist/switch/Switch.svelte.d.ts

@@ -25,9 +25,8 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SWITCH
     props(): {
         as?: TTag | undefined;
     } & (Exclude<keyof PropsOf<TTag>, "form" | ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "value" | "checked" | "name" | "onchange" | "tabIndex" | "defaultChecked" | SwitchPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            slot: SwitchRenderPropArg;
-            props: Record<string, any>;
+        children?: import("svelte").Snippet<[SwitchRenderPropArg & {
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: SwitchRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;

package/dist/switch/SwitchGroup.svelte

@@ -1,37 +1,50 @@
-<script lang="ts" module>const DEFAULT_GROUP_TAG = "svelte:fragment";
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+
+  const DEFAULT_GROUP_TAG = "svelte:fragment"
+
+  export type SwitchGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag>
+
+  export type GroupContext = {
+    switchElement: HTMLElement | null
+  }
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">import { setContext } from "svelte";
-import { useLabels } from "../label/context.svelte.js";
-import { useDescriptions } from "../description/context.svelte.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-let switchElement = $state(null);
-useLabels({
-  name: "SwitchGroup",
-  props: {
-    get htmlFor() {
-      return switchElement?.id;
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">
+  import { setContext } from "svelte"
+  import { useLabels } from "../label/context.svelte.js"
+  import { useDescriptions } from "../description/context.svelte.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  let switchElement = $state<HTMLElement | null>(null)
+  useLabels({
+    name: "SwitchGroup",
+    props: {
+      get htmlFor() {
+        return switchElement?.id
+      },
+      onclick: (event: MouseEvent) => {
+        if (!switchElement) return
+        if (event.currentTarget instanceof HTMLLabelElement) {
+          event.preventDefault()
+        }
+        switchElement.click()
+        switchElement.focus({ preventScroll: true })
+      },
     },
-    onclick: (event) => {
-      if (!switchElement) return;
-      if (event.currentTarget instanceof HTMLLabelElement) {
-        event.preventDefault();
-      }
-      switchElement.click();
-      switchElement.focus({ preventScroll: true });
-    }
-  }
-});
-useDescriptions();
-setContext("GroupContext", {
-  get switchElement() {
-    return switchElement;
-  },
-  set switchElement(element) {
-    switchElement = element;
-  }
-});
-let { ref = $bindable(), ...theirProps } = $props();
+  })
+  useDescriptions()
+
+  setContext<GroupContext>("GroupContext", {
+    get switchElement() {
+      return switchElement
+    },
+    set switchElement(element) {
+      switchElement = element
+    },
+  })
+
+  let { ref = $bindable(), ...theirProps }: { as?: TTag } & SwitchGroupProps<TTag> = $props()
 </script>
 
 <ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="SwitchGroup" bind:ref />

package/dist/switch/SwitchGroup.svelte.d.ts

@@ -9,8 +9,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_GROUP_
         as?: TTag | undefined;
     } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> 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<[{
-            slot: {};
-            props: Record<string, any>;
+            props?: Record<string, any>;
         }]> | undefined;
         class?: string | ((bag: {}) => string) | null | undefined;
         ref?: HTMLElement;