feat: add props to context to determine default values

kobaltedev · Nov 19, 2024 · 08496c2 · 08496c2
1 parent e4b405d
commit 08496c2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 16 deletions.
diff --git a/packages/core/src/radio-group/radio-group-context.tsx b/packages/core/src/radio-group/radio-group-context.tsx
@@ -2,6 +2,7 @@ import { type Accessor, createContext, useContext } from "solid-js";
 
 export interface RadioGroupContextValue {
 	ariaDescribedBy: Accessor<string | undefined>;
+	isDefaultValue: (value: string) => boolean;
 	isSelectedValue: (value: string) => boolean;
 	setSelectedValue: (value: string) => void;
 }

diff --git a/packages/core/src/radio-group/radio-group-item-context.tsx b/packages/core/src/radio-group/radio-group-item-context.tsx
@@ -12,6 +12,7 @@ export interface RadioGroupItemDataSet {
 export interface RadioGroupItemContextValue {
 	value: Accessor<string>;
 	dataset: Accessor<RadioGroupItemDataSet>;
+	isDefault: Accessor<boolean>;
 	isSelected: Accessor<boolean>;
 	isDisabled: Accessor<boolean>;
 	inputId: Accessor<string | undefined>;

diff --git a/packages/core/src/radio-group/radio-group-item.tsx b/packages/core/src/radio-group/radio-group-item.tsx
@@ -96,6 +96,10 @@ export function RadioGroupItem<T extends ValidComponent = "div">(
 	const [inputRef, setInputRef] = createSignal<HTMLInputElement>();
 	const [isFocused, setIsFocused] = createSignal(false);
 
+	const isDefault = createMemo(() => {
+		return radioGroupContext.isDefaultValue(local.value);
+	});
+
 	const isSelected = createMemo(() => {
 		return radioGroupContext.isSelectedValue(local.value);
 	});
@@ -122,6 +126,7 @@ export function RadioGroupItem<T extends ValidComponent = "div">(
 	const context: RadioGroupItemContextValue = {
 		value: () => local.value,
 		dataset,
+		isDefault,
 		isSelected,
 		isDisabled,
 		inputId,

diff --git a/packages/core/src/radio-group/radio-group-root.tsx b/packages/core/src/radio-group/radio-group-root.tsx
@@ -161,29 +161,36 @@ export function RadioGroupRoot<T extends ValidComponent = "div">(
 		return formControlContext.getAriaDescribedBy(local["aria-describedby"]);
 	};
 
+	const isDefaultValue = (value: string) => {
+		return value === props.defaultValue;
+	};
+
 	const isSelectedValue = (value: string) => {
 		return value === selected();
 	};
 
+	const setSelectedValue = (value: string) => {
+		if (formControlContext.isReadOnly() || formControlContext.isDisabled()) {
+			return;
+		}
+
+		setSelected(value);
+
+		// Sync all radio input checked state in the group with the selected value.
+		// This is necessary because checked state might be out of sync
+		// (ex: when using controlled radio-group).
+		if (ref)
+			for (const el of ref.querySelectorAll("[type='radio']")) {
+				const radio = el as HTMLInputElement;
+				radio.checked = isSelectedValue(radio.value);
+			}
+	};
+
 	const context: RadioGroupContextValue = {
 		ariaDescribedBy,
+		isDefaultValue,
 		isSelectedValue,
-		setSelectedValue: (value) => {
-			if (formControlContext.isReadOnly() || formControlContext.isDisabled()) {
-				return;
-			}
-
-			setSelected(value);
-
-			// Sync all radio input checked state in the group with the selected value.
-			// This is necessary because checked state might be out of sync
-			// (ex: when using controlled radio-group).
-			if (ref)
-				for (const el of ref.querySelectorAll("[type='radio']")) {
-					const radio = el as HTMLInputElement;
-					radio.checked = isSelectedValue(radio.value);
-				}
-		},
+		setSelectedValue,
 	};
 
 	return (