shelving 1.230.0 → 1.231.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.230.0",
+	"version": "1.231.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/form/SchemaInput.js

@@ -80,7 +80,7 @@ export function BooleanSchemaInput({ schema, value, ...props }) {
     return _jsx(CheckboxInput, { ...schema, value: !!value, ...props });
 }
 export function StringSchemaInput({ schema, value, ...props }) {
-    return _jsx(TextInput, { ...schema, value: getString(value), ...props });
+    return _jsx(TextInput, { ...schema, value: getString(value), formatter: str => schema.format(schema.sanitize(str)), ...props });
 }
 export function ArraySchemaInput({ schema, value, ...props }) {
     return _jsx(ArrayInput, { ...schema, value: isArray(value) ? value : undefined, ...props });

package/ui/form/SchemaInput.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, test } from "bun:test";
+import { renderToStaticMarkup } from "react-dom/server";
+import { StringSchema } from "../../schema/index.js";
+import { PASSTHROUGH } from "../../util/function.js";
+import { StringSchemaInput } from "./SchemaInput.js";
+
+describe("StringSchemaInput", () => {
+	test("formats the initial value to its clean sanitized value", () => {
+		// The `formatter` runs `schema.sanitize()` then `schema.format()`, so runs of whitespace collapse and the value trims.
+		const schema = new StringSchema({});
+		const html = renderToStaticMarkup(<StringSchemaInput name="title" schema={schema} value="  hello   world  " onValue={PASSTHROUGH} />);
+
+		expect(html).toContain('value="hello world"');
+	});
+
+	test("applies the schema case when sanitizing", () => {
+		// An `upper` schema sanitizes to uppercase, so the clean value is uppercased.
+		const schema = new StringSchema({ case: "upper" });
+		const html = renderToStaticMarkup(<StringSchemaInput name="code" schema={schema} value="  ab cd  " onValue={PASSTHROUGH} />);
+
+		expect(html).toContain('value="AB CD"');
+	});
+
+	test("applies a subclass `format()` after sanitizing", () => {
+		// A subclass `format()` is non-identity (here wrapping in brackets), so the clean value is sanitized then formatted.
+		class BracketSchema extends StringSchema {
+			override format(str: string): string {
+				return str ? `[${str}]` : str;
+			}
+		}
+		const schema = new BracketSchema({});
+		const html = renderToStaticMarkup(<StringSchemaInput name="tag" schema={schema} value="  abc  " onValue={PASSTHROUGH} />);
+
+		expect(html).toContain('value="[abc]"');
+	});
+});

package/ui/form/SchemaInput.tsx

@@ -115,7 +115,7 @@ export function BooleanSchemaInput({ schema, value, ...props }: BooleanSchemaInp
 export interface StringSchemaInputProps extends SchemaInputProps<StringSchema, unknown> {}
 
 export function StringSchemaInput({ schema, value, ...props }: StringSchemaInputProps): ReactElement {
-	return <TextInput {...schema} value={getString(value)} {...props} />;
+	return <TextInput {...schema} value={getString(value)} formatter={str => schema.format(schema.sanitize(str))} {...props} />;
 }
 
 export interface ArraySchemaInputProps extends SchemaInputProps<ArraySchema<unknown>, unknown> {}