@torpor/ui 1.1.4 → 1.1.6

package/dist/Form/CheckBox.torp

@@ -32,16 +32,11 @@ interface CheckBoxProps {
 export default function CheckBox($props: CheckBoxProps | undefined) {
 	let defaultId = getId();
 
-	let name = $props?.name;
-
 	let blurred = false;
 
 	// Get stuff out of the FormContext and FieldContext
 	const formContext = $context[FormContextName] as FormContext;
 	const fieldContext = $context[FieldContextName] as FieldContext;
-	if (fieldContext) {
-		name ??= fieldContext.name;
-	}
 
 	// Use the FieldContext's state, or create a new one
 	let $state =
@@ -88,7 +83,7 @@ export default function CheckBox($props: CheckBoxProps | undefined) {
 			id={$props?.id ?? defaultId}
 			class={["torp-check-box", $props?.class]}
 			type="checkbox"
-			{name}
+			name={$props?.name ?? fieldContext?.name}
 			&checked={$state.value}
 			aria-label={$props?.ariaLabel}
 			data-valid={$state.valid ? "valid" : "invalid"}

package/dist/Form/Field.torp

@@ -53,9 +53,12 @@ export default function Field($props: FieldProps) {
 		});
 	}
 
-	// Set the context to pass down to Labels, Inputs and Messages
+	// Set the context to pass down to Labels, Inputs and Messages. `name` is a
+	// getter so that consumers see updates if the prop changes after mount.
 	let context: FieldContext = {
-		name: $props.name,
+		get name() {
+			return $props.name;
+		},
 		state: $state,
 		validate: handleValidate,
 	};

package/dist/Form/File.torp

@@ -38,16 +38,11 @@ interface FileProps {
 export default function File($props: FileProps | undefined) {
 	let defaultId = getId();
 
-	let name = $props?.name;
-
 	let blurred = false;
 
 	// Get stuff out of the FormContext and FieldContext
 	const formContext = $context[FormContextName] as FormContext;
 	const fieldContext = $context[FieldContextName] as FieldContext;
-	if (fieldContext) {
-		name ??= fieldContext.name;
-	}
 
 	// This will change the form's enctype to `multipart/form-data`
 	if (formContext) {
@@ -94,7 +89,7 @@ export default function File($props: FileProps | undefined) {
 			class={["torp-file", $props?.class]}
 			{$props?.style}
 			type="file"
-			{name}
+			name={$props?.name ?? fieldContext?.name}
 			{$props?.accept}
 			{$props?.placeholder}
 			{$props?.readonly}

package/dist/Form/FileDrop.torp

@@ -39,8 +39,6 @@ export default function FileDrop($props: FileDropProps | undefined) {
 	let inputId = `${$props?.id ?? defaultId}-input`;
 	let input: HTMLInputElement;
 
-	let name = $props?.name;
-
 	let blurred = false;
 
 	function getDisabled(): boolean {
@@ -50,9 +48,6 @@ export default function FileDrop($props: FileDropProps | undefined) {
 	// Get stuff out of the FormContext and FieldContext
 	const formContext = $context[FormContextName] as FormContext;
 	const fieldContext = $context[FieldContextName] as FieldContext;
-	if (fieldContext) {
-		name ??= fieldContext.name;
-	}
 
 	// This will change the form's enctype to `multipart/form-data`
 	if (formContext) {
@@ -166,7 +161,7 @@ export default function FileDrop($props: FileDropProps | undefined) {
 			id={inputId}
 			class="torp-file-drop-input"
 			type="file"
-			{name}
+			name={$props?.name ?? fieldContext?.name}
 			aria-hidden="true"
 			tabindex={-1}
 			multiple={$props?.multiple}

package/dist/Form/Input.torp

@@ -43,16 +43,12 @@ export default function Input($props: InputProps | undefined) {
 	let defaultId = getId();
 
 	let type = $props?.type ?? "text";
-	let name = $props?.name;
 
 	let blurred = false;
 
 	// Get stuff out of the FormContext and FieldContext
 	const formContext = $context[FormContextName] as FormContext;
 	const fieldContext = $context[FieldContextName] as FieldContext;
-	if (fieldContext) {
-		name ??= fieldContext.name;
-	}
 
 	// Use the FieldContext's state, or create a new one
 	let $state =
@@ -100,7 +96,7 @@ export default function Input($props: InputProps | undefined) {
 			class={["torp-input", $props?.class]}
 			{$props?.style}
 			{type}
-			{name}
+			name={$props?.name ?? fieldContext?.name}
 			&value={$state.value}
 			{$props?.placeholder}
 			{$props?.readonly}

package/dist/Form/Select.torp

@@ -36,16 +36,11 @@ interface SelectProps {
 export default function Select($props: SelectProps | undefined) {
 	let defaultId = getId();
 
-	let name = $props?.name;
-
 	let blurred = false;
 
 	// Get stuff out of the FormContext and FieldContext
 	const formContext = $context[FormContextName] as FormContext;
 	const fieldContext = $context[FieldContextName] as FieldContext;
-	if (fieldContext) {
-		name ??= fieldContext.name;
-	}
 
 	// Use the FieldContext's state, or create a new one
 	let $state =
@@ -87,7 +82,7 @@ export default function Select($props: SelectProps | undefined) {
 			id={$props?.id ?? defaultId}
 			class={["torp-select", $props?.class]}
 			{$props?.style}
-			{name}
+			name={$props?.name ?? fieldContext?.name}
 			&value={$state.value}
 			{$props?.placeholder}
 			{$props?.readonly}

package/dist/Form/TextArea.torp

@@ -42,16 +42,11 @@ interface TextAreaProps {
 export default function TextArea($props: TextAreaProps | undefined) {
 	let defaultId = getId();
 
-	let name = $props?.name;
-
 	let blurred = false;
 
 	// Get stuff out of the FormContext and FieldContext
 	const formContext = $context[FormContextName] as FormContext;
 	const fieldContext = $context[FieldContextName] as FieldContext;
-	if (fieldContext) {
-		name ??= fieldContext.name;
-	}
 
 	// Use the FieldContext's state, or create a new one
 	let $state =
@@ -93,7 +88,7 @@ export default function TextArea($props: TextAreaProps | undefined) {
 			id={$props?.id ?? defaultId}
 			class={["torp-text-area", $props?.class]}
 			{$props?.style}
-			{name}
+			name={$props?.name ?? fieldContext?.name}
 			&value={$state.value}
 			{$props?.rows}
 			{$props?.placeholder}

package/dist/Form/Toggle.torp

@@ -36,16 +36,11 @@ interface ToggleProps {
 export default function Toggle($props: ToggleProps | undefined) {
 	let defaultId = getId();
 
-	let name = $props?.name;
-
 	let blurred = false;
 
 	// Get stuff out of the FormContext and FieldContext
 	const formContext = $context[FormContextName] as FormContext;
 	const fieldContext = $context[FieldContextName] as FieldContext;
-	if (fieldContext) {
-		name ??= fieldContext.name;
-	}
 
 	// Use the FieldContext's state, or create a new one
 	let $state =
@@ -93,7 +88,7 @@ export default function Toggle($props: ToggleProps | undefined) {
 			class={["torp-toggle", $props?.class]}
 			type="checkbox"
 			role="switch"
-			{name}
+			name={$props?.name ?? fieldContext?.name}
 			&checked={$state.value}
 			aria-checked={$state.value === true ? "true" : "false"}
 			disabled={$props?.disabled}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/ui",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Accessible, unstyled components for use in your Torpor front-end",
   "type": "module",
   "torpor": true,
@@ -181,8 +181,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@torpor/unplugin": "^1.0.5",
-    "@torpor/view": "^1.1.1"
+    "@torpor/unplugin": "^1.2.0",
+    "@torpor/view": "^1.1.2"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
@@ -198,8 +198,8 @@
     "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
     "vite-plus": "0.3.0",
     "zod": "^4.4.3",
-    "@torpor/check": "^1.0.5",
-    "@torpor/prettier": "^1.0.5"
+    "@torpor/prettier": "^1.0.6",
+    "@torpor/check": "^1.0.6"
   },
   "scripts": {
     "build": "tsgo --noEmit && vp pack",