@pzerelles/headlessui-svelte 2.1.2-next.5 → 2.1.2-next.50

package/dist/portal/Portal.svelte

@@ -1,10 +1,11 @@
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PORTAL_TAG">
-  import type { ElementType } from "../utils/types.js"
-  import InternalPortal, { DEFAULT_PORTAL_TAG, type PortalProps } from "./InternalPortal.svelte"
+<script lang="ts">
+  import InternalPortal, { type PortalProps } from "./InternalPortal.svelte"
 
-  let { ref = $bindable(), enabled = true, ...theirProps }: PortalProps<TTag> = $props()
+  let { element = $bindable(), enabled = true, ...theirProps }: PortalProps = $props()
 </script>
 
 {#if enabled}
-  <InternalPortal {...theirProps} bind:ref />
-{:else if theirProps.children}{@render theirProps.children()}{/if}
+  <InternalPortal {...theirProps} bind:element />
+{:else}
+  {@render theirProps.children?.({})}
+{/if}

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

@@ -1,23 +1,4 @@
-import type { ElementType } from "../utils/types.js";
-import { DEFAULT_PORTAL_TAG, type PortalProps } from "./InternalPortal.svelte";
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> {
-    props(): PortalProps<TTag>;
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Portal: $$IsomorphicComponent;
-type Portal<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = InstanceType<typeof Portal<TTag>>;
+import { type PortalProps } from "./InternalPortal.svelte";
+declare const Portal: import("svelte").Component<PortalProps, {}, "element">;
+type Portal = ReturnType<typeof Portal>;
 export default Portal;

package/dist/portal/PortalGroup.svelte

@@ -1,29 +1,21 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { PropsAsChild } from "../utils/types.js"
 
   const DEFAULT_GROUP_TAG = "svelte:fragment"
-  type GroupRenderPropArg = {}
-  type GroupPropsWeControl = never
+  export type GroupRenderPropArg = {}
 
   export type PortalGroupContext = {
     readonly target: HTMLElement | null
   }
 
-  export type PortalGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<
-    TTag,
-    GroupRenderPropArg,
-    GroupPropsWeControl,
-    {
-      target: HTMLElement | null
-    }
-  >
+  export type PortalGroupProps = PropsAsChild<GroupRenderPropArg, { target: HTMLElement | null }>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">
+<script lang="ts">
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import { setContext } from "svelte"
 
-  let { ref = $bindable(), target, ...theirProps }: { as?: TTag } & PortalGroupProps<TTag> = $props()
+  let { target, ...theirProps }: PortalGroupProps = $props()
 
   setContext("PortalGroupContext", {
     get target() {
@@ -32,4 +24,4 @@
   })
 </script>
 
-<ElementOrComponent {theirProps} defaultTag={DEFAULT_GROUP_TAG} name="PortalGroup" bind:ref />
+<ElementOrComponent {theirProps} name="PortalGroup" />

package/dist/portal/PortalGroup.svelte.d.ts

@@ -1,40 +1,11 @@
-import type { ElementType, Props } from "../utils/types.js";
-declare const DEFAULT_GROUP_TAG = "svelte:fragment";
-type GroupRenderPropArg = {};
-type GroupPropsWeControl = never;
+import type { PropsAsChild } from "../utils/types.js";
+export type GroupRenderPropArg = {};
 export type PortalGroupContext = {
     readonly target: HTMLElement | null;
 };
-export type PortalGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl, {
+export type PortalGroupProps = PropsAsChild<GroupRenderPropArg, {
     target: HTMLElement | null;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "target"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<GroupRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").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?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: GroupRenderPropArg) => string) | undefined;
-    } : {}) & {
-        target: HTMLElement | null;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const PortalGroup: $$IsomorphicComponent;
-type PortalGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = InstanceType<typeof PortalGroup<TTag>>;
+declare const PortalGroup: import("svelte").Component<PortalGroupProps, {}, "">;
+type PortalGroup = ReturnType<typeof PortalGroup>;
 export default PortalGroup;

package/dist/radio-group/Radio.svelte

@@ -0,0 +1,142 @@
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_RADIO_TAG = "span" as const
+
+  export type RadioRenderPropArg = {
+    checked: boolean
+    hover: boolean
+    focus: boolean
+    autofocus: boolean
+    disabled: boolean
+  }
+
+  export type RadioOwnProps<TType> = {
+    element?: HTMLElement
+    value: TType
+    disabled?: boolean
+    autofocus?: boolean
+  }
+
+  export type RadioProps<TType = string> = Props<typeof DEFAULT_RADIO_TAG, RadioRenderPropArg, RadioOwnProps<TType>>
+</script>
+
+<script lang="ts" generics="TType = ComponentProps<typeof RadioGroup>['value']">
+  import { default as RadioGroup } from "./RadioGroup.svelte"
+  import { useActions, useData } from "./contest.svelte.js"
+  import { useId } from "../hooks/use-id.js"
+  import { useLabelledBy } from "../label/context.svelte.js"
+  import { useDescribedBy } from "../description/context.svelte.js"
+  import { onMount, type ComponentProps } from "svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import { useProvidedId } from "../utils/id.js"
+  import { useDisabled } from "../hooks/use-disabled.js"
+
+  const data = useData("Radio")
+  const actions = useActions<TType>("Radio")
+
+  const internalId = useId()
+  const providedId = useProvidedId()
+  const providedDisabled = useDisabled()
+  let {
+    element = $bindable(),
+    id: theirId,
+    value,
+    disabled: theirDisabled = false,
+    autofocus = false,
+    ...theirProps
+  }: RadioProps<TType> = $props()
+  const id = $derived(theirId || providedId || `headlessui-radio-${internalId}`)
+  const disabled = $derived(data.disabled || providedDisabled.current || theirDisabled)
+
+  const labelledby = useLabelledBy()
+  const describedby = useDescribedBy()
+
+  const propsRef = {
+    get value() {
+      return value
+    },
+    get disabled() {
+      return disabled
+    },
+  }
+
+  onMount(() => {
+    return actions.registerOption({
+      id,
+      get element() {
+        return element
+      },
+      get propsRef() {
+        return propsRef
+      },
+    })
+  })
+
+  const handleClick = (event: MouseEvent) => {
+    //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
+    if (!actions.change(value)) return
+    element?.focus()
+  }
+
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
+  )
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+
+  const isFirstOption = $derived(data.firstOption?.id === id)
+
+  const checked = $derived(data.compare(data.value as TType, value))
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        role: "radio",
+        "aria-checked": checked ? "true" : "false",
+        "aria-labelledby": labelledby.value,
+        "aria-describedby": describedby.value,
+        "aria-disabled": disabled ? true : undefined,
+        tabIndex: (() => {
+          if (disabled) return -1
+          if (checked) return 0
+          if (!data.containsCheckedOption && isFirstOption) return 0
+          return -1
+        })(),
+        autofocus,
+        onclick: disabled ? undefined : handleClick,
+      },
+      focusProps,
+      hoverProps
+    )
+  )
+
+  const slot = $derived({
+    checked,
+    disabled,
+    hover,
+    focus,
+    autofocus,
+  } satisfies RadioRenderPropArg)
+</script>
+
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_RADIO_TAG}
+  bind:element
+  name="RadioOption"
+/>

package/dist/radio-group/Radio.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_RADIO_TAG: "span";
+export type RadioRenderPropArg = {
+    checked: boolean;
+    hover: boolean;
+    focus: boolean;
+    autofocus: boolean;
+    disabled: boolean;
+};
+export type RadioOwnProps<TType> = {
+    element?: HTMLElement;
+    value: TType;
+    disabled?: boolean;
+    autofocus?: boolean;
+};
+export type RadioProps<TType = string> = Props<typeof DEFAULT_RADIO_TAG, RadioRenderPropArg, RadioOwnProps<TType>>;
+import { default as RadioGroup } from "./RadioGroup.svelte";
+import { type ComponentProps } from "svelte";
+declare class __sveltets_Render<TType = ComponentProps<typeof RadioGroup>['value']> {
+    props(): RadioProps<TType>;
+    events(): {};
+    slots(): {};
+    bindings(): "element";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TType = ComponentProps<typeof RadioGroup>['value']>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType>['props']>, ReturnType<__sveltets_Render<TType>['events']>, ReturnType<__sveltets_Render<TType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TType>['bindings']>;
+    } & ReturnType<__sveltets_Render<TType>['exports']>;
+    <TType = ComponentProps<typeof RadioGroup>['value']>(internal: unknown, props: ReturnType<__sveltets_Render<TType>['props']> & {}): ReturnType<__sveltets_Render<TType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Radio: $$IsomorphicComponent;
+type Radio<TType = ComponentProps<typeof RadioGroup>['value']> = InstanceType<typeof Radio<TType>>;
+export default Radio;

package/dist/radio-group/RadioGroup.svelte

@@ -0,0 +1,222 @@
+<script lang="ts" module>
+  import { useByComparator, type ByComparator } from "../hooks/use-by-comparator.js"
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_RADIO_GROUP_TAG = "div" as const
+
+  export type RadioGroupRenderPropArg<TType> = {
+    value: TType
+  }
+
+  export type RadioGroupOwnProps<TType = string> = {
+    element?: HTMLElement
+    value?: TType
+    defaultValue?: TType
+    onchange?(value: TType): void
+    by?: ByComparator<TType>
+    disabled?: boolean
+    form?: string
+    name?: string
+  }
+
+  export type RadioGroupProps<TType = string> = Props<
+    typeof DEFAULT_RADIO_GROUP_TAG,
+    RadioGroupRenderPropArg<TType>,
+    RadioGroupOwnProps<TType>
+  >
+</script>
+
+<script lang="ts" generics="TType = string">
+  import { createState, type RadioGroupActionsContext, type RadioGroupDataContext } from "./contest.svelte.js"
+  import { useId } from "../hooks/use-id.js"
+  import { useDisabled } from "../hooks/use-disabled.js"
+  import { useLabelledBy } from "../label/context.svelte.js"
+  import { useDescribedBy } from "../description/context.svelte.js"
+  import { useControllable } from "../hooks/use-controllable.svelte.js"
+  import { getOwnerDocument } from "../utils/owner.js"
+  import { attemptSubmit } from "../utils/form.js"
+  import { Focus, focusIn, FocusResult } from "../utils/focus-management.js"
+  import { setContext } from "svelte"
+  import FormFields from "../internal/FormFields.svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = useId()
+  const providedDisabled = useDisabled()
+  let {
+    element = $bindable(),
+    id = `headlessui-radiogroup-${internalId}`,
+    value: controlledValue,
+    form,
+    name,
+    onchange: controlledOnChange,
+    by,
+    disabled: theirDisabled = false,
+    defaultValue,
+    ...theirProps
+  }: RadioGroupProps<TType> = $props()
+
+  const compare = useByComparator(by)
+  let _state = createState<TType>()
+  const options = $derived(_state.options)
+
+  const disabled = $derived(providedDisabled.current ?? theirDisabled)
+  const labelledBy = useLabelledBy()
+  const describedBy = useDescribedBy()
+
+  const controllable = useControllable<any>(
+    {
+      get controlledValue() {
+        return controlledValue
+      },
+      set controlledValue(value) {
+        controlledValue = value
+      },
+    },
+    controlledOnChange,
+    defaultValue
+  )
+  const { value, onchange } = $derived(controllable)
+
+  const firstOption = $derived(
+    options.find((option) => {
+      if (option.propsRef.disabled) return false
+      return true
+    })
+  )
+  const containsCheckedOption = $derived(options.some((option) => compare(option.propsRef.value as TType, value)))
+
+  const triggerChange = (nextValue: TType) => {
+    if (disabled) return false
+    if (compare(nextValue, value)) return false
+    let nextOption = options.find((option) => compare(option.propsRef.value as TType, nextValue))?.propsRef
+    if (nextOption?.disabled) return false
+
+    onchange?.(nextValue)
+
+    return true
+  }
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    let container = element
+    if (!container) return
+
+    let ownerDocument = getOwnerDocument(container)
+
+    let all = options
+      .filter((option) => option.propsRef.disabled === false)
+      .map((radio) => radio.element) as HTMLElement[]
+
+    switch (event.key) {
+      case "Enter":
+        attemptSubmit(event.currentTarget as HTMLElement)
+        break
+      case "ArrowLeft":
+      case "ArrowUp":
+        {
+          event.preventDefault()
+          event.stopPropagation()
+
+          let result = focusIn(all, Focus.Previous | Focus.WrapAround)
+
+          if (result === FocusResult.Success) {
+            let activeOption = options.find((option) => option.element === ownerDocument?.activeElement)
+            if (activeOption) triggerChange(activeOption.propsRef.value)
+          }
+        }
+        break
+
+      case "ArrowRight":
+      case "ArrowDown":
+        {
+          event.preventDefault()
+          event.stopPropagation()
+
+          let result = focusIn(all, Focus.Next | Focus.WrapAround)
+
+          if (result === FocusResult.Success) {
+            let activeOption = options.find((option) => option.element === ownerDocument?.activeElement)
+            if (activeOption) triggerChange(activeOption.propsRef.value)
+          }
+        }
+        break
+
+      case " ":
+        {
+          event.preventDefault()
+          event.stopPropagation()
+
+          let activeOption = options.find((option) => option.element === ownerDocument?.activeElement)
+          if (activeOption) triggerChange(activeOption.propsRef.value)
+        }
+        break
+    }
+  }
+
+  const dataContext: RadioGroupDataContext = {
+    get value() {
+      return value
+    },
+    get firstOption() {
+      return firstOption
+    },
+    get containsCheckedOption() {
+      return containsCheckedOption
+    },
+    get disabled() {
+      return disabled
+    },
+    get compare() {
+      return compare
+    },
+    get options() {
+      return options
+    },
+  }
+  setContext("RadioGroupDataContext", dataContext)
+
+  const actionContext: RadioGroupActionsContext<TType> = {
+    registerOption(option) {
+      _state.registerOption(option)
+      return () => {
+        _state.unregisterOption(option.id)
+      }
+    },
+    change: triggerChange,
+  }
+  setContext("RadioGroupActionsContext", actionContext)
+
+  const ourProps = $derived({
+    id,
+    role: "radiogroup",
+    "aria-labelledby": labelledBy.value,
+    "aria-describedby": describedBy.value,
+    onkeydown: handleKeyDown,
+  })
+
+  const slot = $derived({
+    value,
+  } satisfies RadioGroupRenderPropArg<TType>)
+
+  const reset = () => {
+    if (defaultValue === undefined) return
+    return triggerChange(defaultValue)
+  }
+</script>
+
+{#if name}
+  <FormFields
+    {disabled}
+    data={{ [name]: value || "on" }}
+    overrides={{ type: "radio", checked: value != null && value !== undefined }}
+    {form}
+    onReset={reset}
+  />
+{/if}
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_RADIO_GROUP_TAG}
+  bind:element
+  name="RadioGroup"
+/>

package/dist/radio-group/RadioGroup.svelte.d.ts

@@ -0,0 +1,34 @@
+import { type ByComparator } from "../hooks/use-by-comparator.js";
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_RADIO_GROUP_TAG: "div";
+export type RadioGroupRenderPropArg<TType> = {
+    value: TType;
+};
+export type RadioGroupOwnProps<TType = string> = {
+    element?: HTMLElement;
+    value?: TType;
+    defaultValue?: TType;
+    onchange?(value: TType): void;
+    by?: ByComparator<TType>;
+    disabled?: boolean;
+    form?: string;
+    name?: string;
+};
+export type RadioGroupProps<TType = string> = Props<typeof DEFAULT_RADIO_GROUP_TAG, RadioGroupRenderPropArg<TType>, RadioGroupOwnProps<TType>>;
+declare class __sveltets_Render<TType = string> {
+    props(): RadioGroupProps<TType>;
+    events(): {};
+    slots(): {};
+    bindings(): "element";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TType = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType>['props']>, ReturnType<__sveltets_Render<TType>['events']>, ReturnType<__sveltets_Render<TType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TType>['bindings']>;
+    } & ReturnType<__sveltets_Render<TType>['exports']>;
+    <TType = string>(internal: unknown, props: ReturnType<__sveltets_Render<TType>['props']> & {}): ReturnType<__sveltets_Render<TType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RadioGroup: $$IsomorphicComponent;
+type RadioGroup<TType = string> = InstanceType<typeof RadioGroup<TType>>;
+export default RadioGroup;