shelving 1.289.1 → 1.290.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.289.1",
+	"version": "1.290.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.
+     * - When not set, a UI picks the control from the number of options.
+     */
+    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 | undefined;
+    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

@@ -18,9 +18,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;
     }
     /**
      * Get an unknown value as one of the allowed choices, or `undefined` if it isn't one.

package/ui/input/Input.module.css

@@ -167,24 +167,25 @@
 				pointer-events: none;
 			}
 
-			/* First [data-slot] child sits one indent from the start, where the text of a plain input starts. */
+			/* First [data-slot] child sits one indent from the left, where the text of a plain input starts. Physical, not
+			   logical: `inset-inline-start` makes bundlers emit a `:lang()` selector for every right-to-left language. */
 			& > [data-slot]:first-child {
-				inset-inline-start: var(--input-indent, var(--space-small));
+				left: var(--input-indent, var(--space-small));
 			}
 
-			/* Last [data-slot] child sits one indent from the end. */
+			/* Last [data-slot] child sits one indent from the right. */
 			& > [data-slot]:last-child {
-				inset-inline-end: var(--input-indent, var(--space-small));
+				right: var(--input-indent, var(--space-small));
 			}
 
-			/* Push the inner .input text past the start slot, with one indent gap. */
+			/* Push the inner .input text past the left slot, with one indent gap. */
 			&:has(> [data-slot]:first-child) > .input {
-				padding-inline-start: calc(var(--input-icon-size, var(--size-icon)) + var(--input-indent, var(--space-small)));
+				padding-left: calc(var(--input-icon-size, var(--size-icon)) + var(--input-indent, var(--space-small)));
 			}
 
-			/* Push the inner .input text clear of the end slot, with one indent gap. */
+			/* Push the inner .input text clear of the right slot, with one indent gap. */
 			&:has(> [data-slot]:last-child) > .input {
-				padding-inline-end: calc(var(--input-icon-size, var(--size-icon)) + var(--input-indent, var(--space-small)));
+				padding-right: calc(var(--input-icon-size, var(--size-icon)) + var(--input-indent, var(--space-small)));
 			}
 		}
 	}

package/ui/input/SchemaInput.d.ts

@@ -80,8 +80,10 @@ 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.
+ * - When `input` is not set, it shows radio inputs for up to 8 options, otherwise 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

@@ -94,8 +94,10 @@ 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.
+ * - When `input` is not set, it shows radio inputs for up to 8 options, otherwise 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 +108,8 @@ 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)
+    const input = choice.input ?? (getKeys(choice.options).length <= 8 ? "radio" : "select");
+    if (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"`, or ≤ 8 options) | `<ChoiceRadioInputs>` |
+| `ChoiceSchema` (`input: "select"`, or > 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

@@ -148,8 +148,10 @@ 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.
+ * - When `input` is not set, it shows radio inputs for up to 8 options, otherwise 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 +162,8 @@ 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} />;
+	const input = choice.input ?? (getKeys(choice.options).length <= 8 ? "radio" : "select");
+	if (input === "radio") return <ChoiceRadioInputs {...schema} value={string} {...props} />;
 	return <SelectInput {...schema} value={string} {...props} />;
 }