shelving 1.258.4 → 1.258.6

package/package.json

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

package/schema/ChoiceSchema.d.ts

@@ -51,6 +51,19 @@ export declare class ChoiceSchema<O extends string, I = never> extends Schema<O>
      * Create a new `ChoiceSchema`.
      */
     constructor({ one, title, placeholder, options, value, ...rest }: ChoiceSchemaOptions<O, I>);
+    /**
+     * Get an unknown value as one of the allowed choices, or `undefined` if it isn't one.
+     *
+     * - Non-throwing counterpart to `validate()`, which defers to this and throws when it returns `undefined`.
+     * - Use it to normalise a value for display (e.g. in a form input) without raising on invalid or sentinel values.
+     *
+     * @param unsafeValue The unknown input value to coerce (defaults to this schema's `value`).
+     * @returns The valid choice key, or `undefined` if the value is not one of the allowed choices.
+     * @example schema.get("yes") // "yes"
+     * @example schema.get("nope") // undefined
+     * @see https://shelving.cc/schema/ChoiceSchema/get
+     */
+    get(unsafeValue?: unknown): O | undefined;
     /**
      * Validate an unknown value as one of the allowed choices.
      *

package/schema/ChoiceSchema.js

@@ -29,6 +29,23 @@ export class ChoiceSchema extends Schema {
         super({ one, title, value, placeholder, ...rest });
         this.options = _getChoiceOptions(options);
     }
+    /**
+     * Get an unknown value as one of the allowed choices, or `undefined` if it isn't one.
+     *
+     * - Non-throwing counterpart to `validate()`, which defers to this and throws when it returns `undefined`.
+     * - Use it to normalise a value for display (e.g. in a form input) without raising on invalid or sentinel values.
+     *
+     * @param unsafeValue The unknown input value to coerce (defaults to this schema's `value`).
+     * @returns The valid choice key, or `undefined` if the value is not one of the allowed choices.
+     * @example schema.get("yes") // "yes"
+     * @example schema.get("nope") // undefined
+     * @see https://shelving.cc/schema/ChoiceSchema/get
+     */
+    get(unsafeValue = this.value) {
+        if (typeof unsafeValue === "string" && isProp(this.options, unsafeValue))
+            return unsafeValue;
+        return undefined;
+    }
     /**
      * Validate an unknown value as one of the allowed choices.
      *
@@ -39,8 +56,9 @@ export class ChoiceSchema extends Schema {
      * @see https://shelving.cc/schema/ChoiceSchema/validate
      */
     validate(unsafeValue = this.value) {
-        if (typeof unsafeValue === "string" && isProp(this.options, unsafeValue))
-            return unsafeValue;
+        const value = this.get(unsafeValue);
+        if (value !== undefined)
+            return value;
         throw unsafeValue ? `Unknown ${this.one}` : "Required";
     }
     /**

package/schema/CountrySchema.d.ts

@@ -22,23 +22,8 @@ export interface CountrySchemaOptions extends SchemaOptions {
  * @see https://shelving.cc/schema/CountrySchema
  */
 export declare class CountrySchema extends ChoiceSchema<Country, PossibleCountry> {
-    /**
-     * Create a new `CountrySchema`.
-     *
-     * @example new CountrySchema({ value: "GB" })
-     * @see https://shelving.cc/schema/CountrySchema
-     */
     constructor({ one, title, value, ...options }?: CountrySchemaOptions);
-    /**
-     * Validate an unknown input value and return a valid country code.
-     *
-     * @param unsafeValue The value to validate (defaults to this schema's `value`).
-     * @returns The validated ISO 3166 country code.
-     * @throws `string` `"Required"` if the value is empty, or `` `Unknown ${one}` `` if it is not a known country.
-     * @example schema.validate("GB") // "GB"
-     * @see https://shelving.cc/schema/CountrySchema/validate
-     */
-    validate(unsafeValue?: unknown): Country;
+    get(unsafeValue?: unknown): Country | undefined;
 }
 /**
  * Sugar instance of `CountrySchema` for a required ISO 3166 country code, e.g. `GB`. Equivalent to `new CountrySchema({})`.

package/schema/CountrySchema.js

@@ -13,29 +13,11 @@ import { NULLABLE } from "./NullableSchema.js";
  * @see https://shelving.cc/schema/CountrySchema
  */
 export class CountrySchema extends ChoiceSchema {
-    /**
-     * Create a new `CountrySchema`.
-     *
-     * @example new CountrySchema({ value: "GB" })
-     * @see https://shelving.cc/schema/CountrySchema
-     */
     constructor({ one = "country", title = "Country", value = "detect", ...options } = {}) {
         super({ one, title, options: COUNTRIES, value, ...options });
     }
-    /**
-     * Validate an unknown input value and return a valid country code.
-     *
-     * @param unsafeValue The value to validate (defaults to this schema's `value`).
-     * @returns The validated ISO 3166 country code.
-     * @throws `string` `"Required"` if the value is empty, or `` `Unknown ${one}` `` if it is not a known country.
-     * @example schema.validate("GB") // "GB"
-     * @see https://shelving.cc/schema/CountrySchema/validate
-     */
-    validate(unsafeValue = this.value) {
-        const country = getCountry(unsafeValue);
-        if (country)
-            return super.validate(country);
-        throw unsafeValue === "detect" ? "Required" : `Unknown ${this.one}`;
+    get(unsafeValue = this.value) {
+        return getCountry(unsafeValue);
     }
 }
 /**

package/schema/NumberSchema.d.ts

@@ -1,4 +1,3 @@
-import { formatNumber } from "../util/format.js";
 import type { SchemaOptions } from "./Schema.js";
 import { Schema } from "./Schema.js";
 /**
@@ -21,11 +20,6 @@ export interface NumberSchemaOptions extends SchemaOptions {
     readonly max?: number | undefined;
     /** Rounding step the value is snapped to (e.g. `1` for integers). */
     readonly step?: number | undefined;
-    /**
-     * Format the number for display in downstream UIs.
-     * @default formatNumber
-     */
-    readonly format?: typeof formatNumber | undefined;
 }
 /**
  * Schema that defines a valid number.
@@ -47,7 +41,7 @@ export declare class NumberSchema extends Schema<number> {
     /**
      * Create a new `NumberSchema`.
      */
-    constructor({ one, title, min, max, step, format, value, ...options }: NumberSchemaOptions);
+    constructor({ one, title, min, max, step, value, ...options }: NumberSchemaOptions);
     /**
      * Validate an unknown value and coerce it to a number.
      *

package/schema/NumberSchema.js

@@ -21,7 +21,7 @@ export class NumberSchema extends Schema {
     /**
      * Create a new `NumberSchema`.
      */
-    constructor({ one = "number", title = "Number", min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step, format = formatNumber, value, ...options }) {
+    constructor({ one = "number", title = "Number", min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step, value, ...options }) {
         super({ one, title, value, ...options });
         this.min = min;
         this.max = max;

package/ui/form/Popover.module.css

@@ -6,15 +6,6 @@
 @import "../style/Tint.module.css";
 
 @layer components {
-	.wrap {
-		position: relative;
-
-		/* Children */
-		&& > * {
-			margin: 0;
-		}
-	}
-
 	.panel {
 		/* Box */
 		display: block;
@@ -23,7 +14,7 @@
 		right: 0;
 		top: calc(100% + var(--popover-offset-y, var(--space-xsmall)));
 		z-index: 1000;
-		max-height: var(--popover-max-height, 30vh);
+		max-height: var(--popover-height, 30vh);
 		border-radius: var(--popover-radius, var(--radius-xsmall));
 		border: var(--popover-border, var(--popover-stroke, var(--stroke-normal)) solid var(--tint-80));
 		padding: var(--popover-padding, var(--space-small));
@@ -35,7 +26,18 @@
 		overscroll-behavior-y: contain;
 
 		/* Style */
-		background: var(--popover-color-bg, var(--tint-100));
+		background: var(--popover-background, var(--tint-100));
 		box-shadow: var(--popover-shadow, var(--shadow-small));
 	}
 }
+
+@layer overrides {
+	.wrap {
+		position: relative;
+
+		/* Children */
+		&& > * {
+			margin: 0;
+		}
+	}
+}

package/ui/form/SchemaInput.d.ts

@@ -84,6 +84,8 @@ export interface ChoiceSchemaInputProps extends SchemaInputProps<ChoiceSchema<st
 /**
  * Show a choice input for a `ChoiceSchema` — 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.
  * @kind component
  * @example <ChoiceSchemaInput name="role" schema={ROLE} />

package/ui/form/SchemaInput.js

@@ -96,16 +96,19 @@ export function NumberSchemaInput({ schema, value, ...props }) {
 /**
  * Show a choice input for a `ChoiceSchema` — 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.
  * @kind component
  * @example <ChoiceSchemaInput name="role" schema={ROLE} />
  * @see https://shelving.cc/ui/ChoiceSchemaInput
  */
 export function ChoiceSchemaInput({ schema, value, ...props }) {
-    const { options } = requireSource(ChoiceSchema, schema);
-    if (getKeys(options).length <= 8)
-        return _jsx(ChoiceRadioInputs, { ...schema, value: getString(value), ...props });
-    return _jsx(SelectInput, { ...schema, value: getString(value), ...props });
+    const choice = requireSource(ChoiceSchema, schema);
+    const string = choice.get(value);
+    if (getKeys(choice.options).length <= 8)
+        return _jsx(ChoiceRadioInputs, { ...schema, value: string, ...props });
+    return _jsx(SelectInput, { ...schema, value: string, ...props });
 }
 /**
  * Show a `CheckboxInput` for a `BooleanSchema`.

package/ui/form/SchemaInput.tsx

@@ -152,15 +152,18 @@ export interface ChoiceSchemaInputProps extends SchemaInputProps<ChoiceSchema<st
 /**
  * Show a choice input for a `ChoiceSchema` — 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.
  * @kind component
  * @example <ChoiceSchemaInput name="role" schema={ROLE} />
  * @see https://shelving.cc/ui/ChoiceSchemaInput
  */
 export function ChoiceSchemaInput({ schema, value, ...props }: ChoiceSchemaInputProps): ReactElement {
-	const { options } = requireSource(ChoiceSchema, schema);
-	if (getKeys(options).length <= 8) return <ChoiceRadioInputs {...schema} value={getString(value)} {...props} />;
-	return <SelectInput {...schema} value={getString(value)} {...props} />;
+	const choice = requireSource(ChoiceSchema, schema);
+	const string = choice.get(value);
+	if (getKeys(choice.options).length <= 8) return <ChoiceRadioInputs {...schema} value={string} {...props} />;
+	return <SelectInput {...schema} value={string} {...props} />;
 }
 
 /**