shelving 1.289.2 → 1.291.0

package/package.json

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

package/schema/ChoiceSchema.d.ts

@@ -18,11 +18,18 @@ export type ChoiceOptions<K extends string> = {
  * @see https://shelving.cc/schema/PossibleChoiceOptions
  */
 export type PossibleChoiceOptions<K extends string> = ImmutableArray<K> | ChoiceOptions<K>;
+/**
+ * Input control hint for a `ChoiceSchema`: `"radio"` for radio inputs, or `"select"` for a `<select>`.
+ *
+ * @see https://shelving.cc/schema/ChoiceInputType
+ */
+export type ChoiceInputType = "radio" | "select";
 /**
  * Options for `ChoiceSchema`.
  *
  * - `options` — the allowed choices, as a `{ key: title }` dictionary or an array of keys.
  * - `value` — default option used when the input is `undefined`.
+ * - `input` — control hint for downstream UIs (radios or a select).
  *
  * @see https://shelving.cc/schema/ChoiceSchemaOptions
  */
@@ -31,6 +38,11 @@ export interface ChoiceSchemaOptions<O extends string, I = never> extends Schema
     readonly options: PossibleChoiceOptions<O>;
     /** Default option for the value. */
     readonly value?: O | I;
+    /**
+     * Input control hint for downstream UIs.
+     * @default "radio" for 8 or fewer options, otherwise "select"
+     */
+    readonly input?: ChoiceInputType | undefined;
 }
 /**
  * Schema that validates a value against a fixed set of allowed string choices.
@@ -43,7 +55,8 @@ export interface ChoiceSchemaOptions<O extends string, I = never> extends Schema
 export declare class ChoiceSchema<O extends string, I = never> extends Schema<O> {
     readonly value: O | I | undefined;
     readonly options: ChoiceOptions<O>;
-    constructor({ one, title, placeholder, options, value, ...rest }: ChoiceSchemaOptions<O, I>);
+    readonly input: ChoiceInputType;
+    constructor({ one, title, placeholder, options, value, input, ...rest }: ChoiceSchemaOptions<O, I>);
     /**
      * Get an unknown value as one of the allowed choices, or `undefined` if it isn't one.
      *

package/schema/ChoiceSchema.js

@@ -1,5 +1,5 @@
 import { isArray } from "../util/array.js";
-import { isProp } from "../util/object.js";
+import { getKeys, isProp } from "../util/object.js";
 import { Schema } from "./Schema.js";
 /** Get a `ChoiceOptions` object for a set of `PossibleChoiceOptions`. */
 function _getChoiceOptions(options) {
@@ -8,6 +8,8 @@ function _getChoiceOptions(options) {
 function _getChoiceOption(k) {
     return [k, k];
 }
+/** Maximum number of options for which a `ChoiceSchema` defaults to radio inputs. */
+const MAX_RADIO_OPTIONS = 8;
 /**
  * Schema that validates a value against a fixed set of allowed string choices.
  *
@@ -18,9 +20,11 @@ function _getChoiceOption(k) {
  */
 export class ChoiceSchema extends Schema {
     options;
-    constructor({ one = "choice", title = "Choice", placeholder = `No ${one}`, options, value, ...rest }) {
+    input;
+    constructor({ one = "choice", title = "Choice", placeholder = `No ${one}`, options, value, input, ...rest }) {
         super({ one, title, value, placeholder, ...rest });
         this.options = _getChoiceOptions(options);
+        this.input = input ?? (getKeys(this.options).length <= MAX_RADIO_OPTIONS ? "radio" : "select");
     }
     /**
      * Get an unknown value as one of the allowed choices, or `undefined` if it isn't one.

package/ui/input/SchemaInput.d.ts

@@ -80,8 +80,9 @@ export declare function NumberSchemaInput({ schema, value, ...props }: NumberSch
 export interface ChoiceSchemaInputProps extends SchemaInputProps<ChoiceSchema<string>, unknown> {
 }
 /**
- * Show a choice input for a `ChoiceSchema` — radio inputs for up to 8 options, otherwise a select.
+ * Show a choice input for a `ChoiceSchema` — radio inputs or a select.
  *
+ * - The schema's `input` picks the control: `"radio"` for radio inputs, `"select"` for a select.
  * - The value is normalised through the schema's `get()`, so invalid or sentinel values (e.g. a `CountrySchema`'s `"detect"`) resolve to a real option or fall back to the placeholder rather than mis-selecting the first option.
  *
  * @returns A `ChoiceRadioInputs` or `SelectInput` element bound to the schema.

package/ui/input/SchemaInput.js

@@ -14,7 +14,6 @@ import { isArray } from "../../util/array.js";
 import { isData } from "../../util/data.js";
 import { isDictionary } from "../../util/dictionary.js";
 import { getNumber } from "../../util/number.js";
-import { getKeys } from "../../util/object.js";
 import { getSource, requireSource } from "../../util/source.js";
 import { getString } from "../../util/string.js";
 import { Field } from "../form/Field.js";
@@ -94,8 +93,9 @@ export function NumberSchemaInput({ schema, value, ...props }) {
     return _jsx(NumberInput, { ...schema, value: getNumber(value), formatter: num => schema.format(num), ...props });
 }
 /**
- * Show a choice input for a `ChoiceSchema` — radio inputs for up to 8 options, otherwise a select.
+ * Show a choice input for a `ChoiceSchema` — radio inputs or a select.
  *
+ * - The schema's `input` picks the control: `"radio"` for radio inputs, `"select"` for a select.
  * - The value is normalised through the schema's `get()`, so invalid or sentinel values (e.g. a `CountrySchema`'s `"detect"`) resolve to a real option or fall back to the placeholder rather than mis-selecting the first option.
  *
  * @returns A `ChoiceRadioInputs` or `SelectInput` element bound to the schema.
@@ -106,7 +106,7 @@ export function NumberSchemaInput({ schema, value, ...props }) {
 export function ChoiceSchemaInput({ schema, value, ...props }) {
     const choice = requireSource(ChoiceSchema, schema);
     const string = choice.get(value);
-    if (getKeys(choice.options).length <= 8)
+    if (choice.input === "radio")
         return _jsx(ChoiceRadioInputs, { ...schema, value: string, ...props });
     return _jsx(SelectInput, { ...schema, value: string, ...props });
 }

package/ui/input/SchemaInput.md

@@ -17,8 +17,8 @@ The schema-to-input mapping:
 | `NumberSchema` | `<NumberInput>` (formatted on blur) |
 | `DateSchema` | `<DateInput>` |
 | `BooleanSchema` | `<CheckboxInput>` |
-| `ChoiceSchema` (≤ 8 options) | `<ChoiceRadioInputs>` |
-| `ChoiceSchema` (> 8 options) | `<SelectInput>` |
+| `ChoiceSchema` (`input: "radio"`, the default for ≤ 8 options) | `<ChoiceRadioInputs>` |
+| `ChoiceSchema` (`input: "select"`, the default for > 8 options) | `<SelectInput>` |
 | `ArraySchema` | `<ArrayInput>` |
 | `DictionarySchema` | `<DictionaryInput>` |
 | `DataSchema` | `<DataInput>` |

package/ui/input/SchemaInput.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, test } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
-import { PASSWORD, StringSchema, URL_SCHEMA } from "shelving/schema";
-import { StringSchemaInput, TextInput, type TextInputProps } from "shelving/ui";
+import { ChoiceSchema, PASSWORD, StringSchema, URL_SCHEMA } from "shelving/schema";
+import { ChoiceSchemaInput, StringSchemaInput, TextInput, type TextInputProps } from "shelving/ui";
 import { PASSTHROUGH } from "shelving/util/function";
 
 /** A `StringSchema` with a non-identity `format()` (wraps in brackets) so display and published values differ. */
@@ -100,3 +100,31 @@ describe("StringSchemaInput", () => {
 		expect(currentTarget.value).toBe("example.com/path");
 	});
 });
+
+describe("ChoiceSchemaInput", () => {
+	const FEW = ["a", "b", "c"];
+	const MANY = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
+
+	test("shows radios for 8 or fewer options when input is not set", () => {
+		const html = renderToStaticMarkup(<ChoiceSchemaInput name="x" schema={new ChoiceSchema({ options: FEW })} onValue={PASSTHROUGH} />);
+		expect(html).toContain('type="radio"');
+		expect(html).not.toContain("<select");
+	});
+	test("shows a select for more than 8 options when input is not set", () => {
+		const html = renderToStaticMarkup(<ChoiceSchemaInput name="x" schema={new ChoiceSchema({ options: MANY })} onValue={PASSTHROUGH} />);
+		expect(html).toContain("<select");
+		expect(html).not.toContain('type="radio"');
+	});
+	test("shows a select for few options when input is select", () => {
+		const schema = new ChoiceSchema({ options: FEW, input: "select" });
+		const html = renderToStaticMarkup(<ChoiceSchemaInput name="x" schema={schema} onValue={PASSTHROUGH} />);
+		expect(html).toContain("<select");
+		expect(html).not.toContain('type="radio"');
+	});
+	test("shows radios for many options when input is radio", () => {
+		const schema = new ChoiceSchema({ options: MANY, input: "radio" });
+		const html = renderToStaticMarkup(<ChoiceSchemaInput name="x" schema={schema} onValue={PASSTHROUGH} />);
+		expect(html).toContain('type="radio"');
+		expect(html).not.toContain("<select");
+	});
+});

package/ui/input/SchemaInput.tsx

@@ -15,7 +15,6 @@ import { isArray } from "../../util/array.js";
 import { type Data, isData } from "../../util/data.js";
 import { isDictionary } from "../../util/dictionary.js";
 import { getNumber } from "../../util/number.js";
-import { getKeys } from "../../util/object.js";
 import { getSource, requireSource } from "../../util/source.js";
 import { getString } from "../../util/string.js";
 import type { ValidatorType } from "../../util/validate.js";
@@ -148,8 +147,9 @@ export function NumberSchemaInput({ schema, value, ...props }: NumberSchemaInput
 export interface ChoiceSchemaInputProps extends SchemaInputProps<ChoiceSchema<string>, unknown> {}
 
 /**
- * Show a choice input for a `ChoiceSchema` — radio inputs for up to 8 options, otherwise a select.
+ * Show a choice input for a `ChoiceSchema` — radio inputs or a select.
  *
+ * - The schema's `input` picks the control: `"radio"` for radio inputs, `"select"` for a select.
  * - The value is normalised through the schema's `get()`, so invalid or sentinel values (e.g. a `CountrySchema`'s `"detect"`) resolve to a real option or fall back to the placeholder rather than mis-selecting the first option.
  *
  * @returns A `ChoiceRadioInputs` or `SelectInput` element bound to the schema.
@@ -160,7 +160,7 @@ export interface ChoiceSchemaInputProps extends SchemaInputProps<ChoiceSchema<st
 export function ChoiceSchemaInput({ schema, value, ...props }: ChoiceSchemaInputProps): ReactElement {
 	const choice = requireSource(ChoiceSchema, schema);
 	const string = choice.get(value);
-	if (getKeys(choice.options).length <= 8) return <ChoiceRadioInputs {...schema} value={string} {...props} />;
+	if (choice.input === "radio") return <ChoiceRadioInputs {...schema} value={string} {...props} />;
 	return <SelectInput {...schema} value={string} {...props} />;
 }