From 7ff28492a29180a0af4eb8315581b3dcc63b751e Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 20 Dec 2021 22:40:09 -0800
Subject: [PATCH] Move RadioGroup to <Render>

---
 .../components/radio-group/RadioGroup.svelte  | 28 +++++++---
 .../radio-group/RadioGroupOption.svelte       | 53 ++++++++++---------
 2 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/radio-group/RadioGroup.svelte b/src/lib/components/radio-group/RadioGroup.svelte
index 84766e7..2ca21fa 100644
--- a/src/lib/components/radio-group/RadioGroup.svelte
+++ b/src/lib/components/radio-group/RadioGroup.svelte
@@ -46,6 +46,18 @@
 
 <script lang="ts">
   import { treeWalker } from "$lib/hooks/use-tree-walker";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "change",
+  ]);
+
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
+
   export let disabled = false;
   export let value: StateDefinition["value"];
   let radioGroupRef: HTMLElement | null = null;
@@ -108,7 +120,8 @@
     },
   });
 
-  function handleKeyDown(event: KeyboardEvent) {
+  function handleKeyDown(e: CustomEvent) {
+    let event = e as any as KeyboardEvent;
     if (!radioGroupRef) return;
     if (!radioGroupRef.contains(event.target as HTMLElement)) return;
 
@@ -171,16 +184,19 @@
   };
 </script>
 
-<DescriptionProvider name="RadioGroup.Description" let:describedby>
-  <LabelProvider name="RadioGroup.Label" let:labelledby>
-    <div
+<DescriptionProvider name="RadioGroupDescription" let:describedby>
+  <LabelProvider name="RadioGroupLabel" let:labelledby>
+    <Render
       {...{ ...$$restProps, ...propsWeControl }}
-      bind:this={radioGroupRef}
+      {as}
+      use={[...use, forwardEvents]}
+      name={"RadioGroup"}
+      bind:el={radioGroupRef}
       aria-labelledby={labelledby}
       aria-describedby={describedby}
       on:keydown={handleKeyDown}
     >
       <slot />
-    </div>
+    </Render>
   </LabelProvider>
 </DescriptionProvider>
diff --git a/src/lib/components/radio-group/RadioGroupOption.svelte b/src/lib/components/radio-group/RadioGroupOption.svelte
index 3aaaac1..f6bad7c 100644
--- a/src/lib/components/radio-group/RadioGroupOption.svelte
+++ b/src/lib/components/radio-group/RadioGroupOption.svelte
@@ -2,9 +2,17 @@
   import { onDestroy } from "svelte";
   import DescriptionProvider from "$lib/components/description/DescriptionProvider.svelte";
   import LabelProvider from "$lib/components/label/LabelProvider.svelte";
-
   import { useRadioGroupContext, Option } from "./RadioGroup.svelte";
   import { useId } from "$lib/hooks/use-id";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
 
   enum OptionState {
     Empty = 1 << 0,
@@ -50,42 +58,37 @@
     state &= ~OptionState.Active;
   }
 
-  $: classStyle = $$props.class
-    ? typeof $$props.class === "function"
-      ? $$props.class({
-          active: state & OptionState.Active,
-          checked,
-          disabled: isDisabled,
-        })
-      : $$props.class
-    : "";
-
   $: propsWeControl = {
     id,
-    class: classStyle,
     role: "radio",
     "aria-checked": checked ? ("true" as const) : ("false" as const),
     "aria-disabled": isDisabled ? true : undefined,
     tabIndex: tabIndex,
   };
+
+  $: slotProps = {
+    checked,
+    disabled: isDisabled,
+    active: state & OptionState.Active,
+  };
 </script>
 
-<DescriptionProvider name="RadioGroup.Description" let:describedby>
-  <LabelProvider name="RadioGroup.Label" let:labelledby>
-    <div
+<DescriptionProvider name="RadioGroupDescription" let:describedby>
+  <LabelProvider name="RadioGroupLabel" let:labelledby>
+    <Render
       {...{ ...$$restProps, ...propsWeControl }}
-      bind:this={optionRef}
+      {as}
+      {slotProps}
+      use={[...use, forwardEvents]}
+      name={"RadioGroupOption"}
+      bind:el={optionRef}
       aria-labelledby={labelledby}
       aria-describedby={describedby}
-      on:click={isDisabled ? undefined : handleClick}
-      on:focus={isDisabled ? undefined : handleFocus}
-      on:blur={isDisabled ? undefined : handleBlur}
+      on:click={isDisabled ? () => {} : handleClick}
+      on:focus={isDisabled ? () => {} : handleFocus}
+      on:blur={isDisabled ? () => {} : handleBlur}
     >
-      <slot
-        {checked}
-        disabled={isDisabled}
-        active={state & OptionState.Active}
-      />
-    </div>
+      <slot {...slotProps} />
+    </Render>
   </LabelProvider>
 </DescriptionProvider>