@olenbetong/appframe-ds 1.7.1 → 1.7.2

package/src/autocomplete/utils.ts

@@ -1,183 +1,183 @@
-import { useCallback, useRef, useState } from "react";
-
-import type {
-	AutocompleteChangeReason,
-	AutocompleteFilterOptionsState,
-	AutocompleteInputChangeReason,
-} from "./types.js";
-
-/**
- * Default label resolver: uses `label`, then `name`, then the value itself.
- */
-export function defaultGetOptionLabel(option: unknown): string {
-	if (option == null) return "";
-	if (typeof option === "string") return option;
-	if (typeof option === "object") {
-		let record = option as Record<string, unknown>;
-		if (typeof record.label === "string") return record.label;
-		if (typeof record.name === "string") return record.name;
-	}
-
-	return String(option);
-}
-
-export interface CreateFilterOptionsConfig<Option> {
-	/**
-	 * Removes diacritics before matching.
-	 * @default true
-	 */
-	ignoreAccents?: boolean;
-	/**
-	 * Matches case insensitively.
-	 * @default true
-	 */
-	ignoreCase?: boolean;
-	/**
-	 * Where in the option label the query has to match.
-	 * @default "any"
-	 */
-	matchFrom?: "any" | "start";
-	/**
-	 * The maximum number of options returned.
-	 */
-	limit?: number;
-	/**
-	 * Trims the query before matching.
-	 * @default false
-	 */
-	trim?: boolean;
-	/**
-	 * Returns the string the query is matched against.
-	 */
-	stringify?: (option: Option) => string;
-}
-
-/**
- * Creates a filter function for the `filterOptions` prop, equivalent to MUI's
- * `createFilterOptions`.
- *
- * @example
- * ```jsx
- * let filterOptions = createFilterOptions({ matchFrom: "start", limit: 20 });
- * <Combobox options={options} filterOptions={filterOptions} />
- * ```
- */
-export function createFilterOptions<Option>(config: CreateFilterOptionsConfig<Option> = {}) {
-	let { ignoreAccents = true, ignoreCase = true, limit, matchFrom = "any", stringify, trim = false } = config;
-
-	return (options: readonly Option[], state: AutocompleteFilterOptionsState<Option>) => {
-		let input = trim ? state.inputValue.trim() : state.inputValue;
-		if (ignoreCase) input = input.toLowerCase();
-		if (ignoreAccents) input = stripDiacritics(input);
-
-		let filtered = input
-			? options.filter((option) => {
-					let candidate = (stringify ?? state.getOptionLabel)(option);
-					if (ignoreCase) candidate = candidate.toLowerCase();
-					if (ignoreAccents) candidate = stripDiacritics(candidate);
-
-					return matchFrom === "start" ? candidate.startsWith(input) : candidate.includes(input);
-				})
-			: [...options];
-
-		return typeof limit === "number" ? filtered.slice(0, limit) : filtered;
-	};
-}
-
-function stripDiacritics(value: string) {
-	return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
-}
-
-export const defaultFilterOptions = createFilterOptions<unknown>();
-
-export interface OptionGroup<Option> {
-	/**
-	 * Group header text. Named `value` because Base UI uses it as the group key.
-	 */
-	value: string;
-	items: Option[];
-	[key: string]: unknown;
-}
-
-/**
- * Splits an already sorted list of options into consecutive groups, the same
- * way MUI's `groupBy` works.
- */
-export function groupOptions<Option>(options: readonly Option[], groupBy: (option: Option) => string) {
-	let groups: OptionGroup<Option>[] = [];
-
-	for (let option of options) {
-		let group = groupBy(option);
-		let last = groups[groups.length - 1];
-
-		if (last && last.value === group) {
-			last.items.push(option);
-		} else {
-			groups.push({ value: group, items: [option] });
-		}
-	}
-
-	return groups;
-}
-
-/**
- * State that is controlled when `controlled` is not `undefined`, and
- * uncontrolled otherwise.
- */
-export function useControlled<T>(controlled: T | undefined, defaultValue: T) {
-	let [uncontrolled, setUncontrolled] = useState(defaultValue);
-	let isControlled = useRef(controlled !== undefined).current;
-	let value = isControlled ? (controlled as T) : uncontrolled;
-
-	let setValue = useCallback(
-		(next: T) => {
-			if (!isControlled) setUncontrolled(next);
-		},
-		[isControlled],
-	);
-
-	return [value, setValue] as const;
-}
-
-/**
- * Compares two options, falling back to reference equality like MUI does.
- */
-export function areOptionsEqual<Option>(
-	a: Option,
-	b: Option,
-	isOptionEqualToValue?: (option: Option, value: Option) => boolean,
-) {
-	return isOptionEqualToValue ? isOptionEqualToValue(a, b) : Object.is(a, b);
-}
-
-/**
- * Maps a Base UI change reason to the MUI-style reason.
- */
-export function mapChangeReason(reason: string, next: unknown): AutocompleteChangeReason {
-	if (reason === "clear-press" || reason === "input-clear") return "clear";
-	if (reason === "chip-remove-press") return "removeOption";
-	if (next == null || (Array.isArray(next) && next.length === 0)) return "clear";
-
-	return "selectOption";
-}
-
-function mapInputChangeReason(reason: string): AutocompleteInputChangeReason {
-	if (reason === "input-change") return "input";
-	if (reason === "input-clear" || reason === "clear-press") return "clear";
-
-	return "reset";
-}
-
-/**
- * Keeps the input value state in sync and forwards the change to
- * `onInputChange` with a MUI-style reason.
- */
-export function handleInputValueChange(
-	next: string,
-	details: { event?: Event; reason: string },
-	setInputValue: (value: string) => void,
-	onInputChange?: (event: Event | undefined, value: string, reason: AutocompleteInputChangeReason) => void,
-) {
-	setInputValue(next);
-	onInputChange?.(details.event, next, mapInputChangeReason(details.reason));
-}
+import { useCallback, useRef, useState } from "react";
+
+import type {
+	AutocompleteChangeReason,
+	AutocompleteFilterOptionsState,
+	AutocompleteInputChangeReason,
+} from "./types.js";
+
+/**
+ * Default label resolver: uses `label`, then `name`, then the value itself.
+ */
+export function defaultGetOptionLabel(option: unknown): string {
+	if (option == null) return "";
+	if (typeof option === "string") return option;
+	if (typeof option === "object") {
+		let record = option as Record<string, unknown>;
+		if (typeof record.label === "string") return record.label;
+		if (typeof record.name === "string") return record.name;
+	}
+
+	return String(option);
+}
+
+export interface CreateFilterOptionsConfig<Option> {
+	/**
+	 * Removes diacritics before matching.
+	 * @default true
+	 */
+	ignoreAccents?: boolean;
+	/**
+	 * Matches case insensitively.
+	 * @default true
+	 */
+	ignoreCase?: boolean;
+	/**
+	 * Where in the option label the query has to match.
+	 * @default "any"
+	 */
+	matchFrom?: "any" | "start";
+	/**
+	 * The maximum number of options returned.
+	 */
+	limit?: number;
+	/**
+	 * Trims the query before matching.
+	 * @default false
+	 */
+	trim?: boolean;
+	/**
+	 * Returns the string the query is matched against.
+	 */
+	stringify?: (option: Option) => string;
+}
+
+/**
+ * Creates a filter function for the `filterOptions` prop, equivalent to MUI's
+ * `createFilterOptions`.
+ *
+ * @example
+ * ```jsx
+ * let filterOptions = createFilterOptions({ matchFrom: "start", limit: 20 });
+ * <Combobox options={options} filterOptions={filterOptions} />
+ * ```
+ */
+export function createFilterOptions<Option>(config: CreateFilterOptionsConfig<Option> = {}) {
+	let { ignoreAccents = true, ignoreCase = true, limit, matchFrom = "any", stringify, trim = false } = config;
+
+	return (options: readonly Option[], state: AutocompleteFilterOptionsState<Option>) => {
+		let input = trim ? state.inputValue.trim() : state.inputValue;
+		if (ignoreCase) input = input.toLowerCase();
+		if (ignoreAccents) input = stripDiacritics(input);
+
+		let filtered = input
+			? options.filter((option) => {
+					let candidate = (stringify ?? state.getOptionLabel)(option);
+					if (ignoreCase) candidate = candidate.toLowerCase();
+					if (ignoreAccents) candidate = stripDiacritics(candidate);
+
+					return matchFrom === "start" ? candidate.startsWith(input) : candidate.includes(input);
+				})
+			: [...options];
+
+		return typeof limit === "number" ? filtered.slice(0, limit) : filtered;
+	};
+}
+
+function stripDiacritics(value: string) {
+	return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+}
+
+export const defaultFilterOptions = createFilterOptions<unknown>();
+
+export interface OptionGroup<Option> {
+	/**
+	 * Group header text. Named `value` because Base UI uses it as the group key.
+	 */
+	value: string;
+	items: Option[];
+	[key: string]: unknown;
+}
+
+/**
+ * Splits an already sorted list of options into consecutive groups, the same
+ * way MUI's `groupBy` works.
+ */
+export function groupOptions<Option>(options: readonly Option[], groupBy: (option: Option) => string) {
+	let groups: OptionGroup<Option>[] = [];
+
+	for (let option of options) {
+		let group = groupBy(option);
+		let last = groups[groups.length - 1];
+
+		if (last && last.value === group) {
+			last.items.push(option);
+		} else {
+			groups.push({ value: group, items: [option] });
+		}
+	}
+
+	return groups;
+}
+
+/**
+ * State that is controlled when `controlled` is not `undefined`, and
+ * uncontrolled otherwise.
+ */
+export function useControlled<T>(controlled: T | undefined, defaultValue: T) {
+	let [uncontrolled, setUncontrolled] = useState(defaultValue);
+	let isControlled = useRef(controlled !== undefined).current;
+	let value = isControlled ? (controlled as T) : uncontrolled;
+
+	let setValue = useCallback(
+		(next: T) => {
+			if (!isControlled) setUncontrolled(next);
+		},
+		[isControlled],
+	);
+
+	return [value, setValue] as const;
+}
+
+/**
+ * Compares two options, falling back to reference equality like MUI does.
+ */
+export function areOptionsEqual<Option>(
+	a: Option,
+	b: Option,
+	isOptionEqualToValue?: (option: Option, value: Option) => boolean,
+) {
+	return isOptionEqualToValue ? isOptionEqualToValue(a, b) : Object.is(a, b);
+}
+
+/**
+ * Maps a Base UI change reason to the MUI-style reason.
+ */
+export function mapChangeReason(reason: string, next: unknown): AutocompleteChangeReason {
+	if (reason === "clear-press" || reason === "input-clear") return "clear";
+	if (reason === "chip-remove-press") return "removeOption";
+	if (next == null || (Array.isArray(next) && next.length === 0)) return "clear";
+
+	return "selectOption";
+}
+
+function mapInputChangeReason(reason: string): AutocompleteInputChangeReason {
+	if (reason === "input-change") return "input";
+	if (reason === "input-clear" || reason === "clear-press") return "clear";
+
+	return "reset";
+}
+
+/**
+ * Keeps the input value state in sync and forwards the change to
+ * `onInputChange` with a MUI-style reason.
+ */
+export function handleInputValueChange(
+	next: string,
+	details: { event?: Event; reason: string },
+	setInputValue: (value: string) => void,
+	onInputChange?: (event: Event | undefined, value: string, reason: AutocompleteInputChangeReason) => void,
+) {
+	setInputValue(next);
+	onInputChange?.(details.event, next, mapInputChangeReason(details.reason));
+}

package/src/input/InputAdornments.css

@@ -1,80 +1,101 @@
-/*
- * The wrapper is the visual input: it owns the border, background, hover and
- * focus styling, while the inner Designsystemet input is rendered bare so the
- * input and the adornments read as a single control.
- */
-.ObInputAdornments-root {
-	--obInputAdornments-padding: 0.25rem;
-	--obInputAdornments-gap: 0.25rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
-
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
-	gap: var(--obInputAdornments-gap);
-	padding: var(--obInputAdornments-padding);
-	inline-size: 100%;
-	color: var(--ds-color-neutral-text-default, #1e2b3c);
-	background-color: var(--ds-color-neutral-surface-default, #fff);
-	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
-	border-radius: var(--ds-border-radius-md, 0.375rem);
-}
-
-/* Designsystemet components come in sm, md and lg; xs and xl are typography-only sizes */
-.ObInputAdornments-root[data-size="sm"] {
-	--obInputAdornments-padding: 0.25rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-2, 0.875rem);
-}
-
-.ObInputAdornments-root[data-size="md"] {
-	--obInputAdornments-padding: 0.25rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
-}
-
-.ObInputAdornments-root[data-size="lg"] {
-	--obInputAdornments-padding: 0.375rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-4, 1.125rem);
-}
-
-/* The Designsystemet input hover (an inner outline doubling the border), drawn on the wrapper */
-.ObInputAdornments-root:hover:not(
-		:focus-within,
-		:has(.ObInputAdornments-field:disabled, .ObInputAdornments-field[readonly])
-	) {
-	outline: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
-	outline-offset: -0.1px;
-}
-
-.ObInputAdornments-root:has(.ObInputAdornments-field:focus-visible) {
-	box-shadow: var(--dsc-focus-boxShadow);
-	outline: var(--dsc-focus-outline);
-	outline-offset: var(--ds-border-width-focus, 3px);
-}
-
-.ObInputAdornments-root:has(.ObInputAdornments-field:disabled) {
-	cursor: not-allowed;
-	opacity: var(--ds-disabled-opacity, 0.3);
-}
-
-/* The bare input: all the visual styling lives on the wrapper instead */
-.ObInputAdornments-root .ObInputAdornments-field {
-	flex: 1;
-	min-inline-size: 0;
-	font-size: var(--obInputAdornments-fontSize);
-	background: transparent;
-	border: none;
-}
-
-.ObInputAdornments-root .ObInputAdornments-field:disabled {
-	opacity: 1;
-}
-
-.ObInputAdornments-root .ObInputAdornments-field:hover {
-	outline: none;
-}
-
-.ObInputAdornments-root .ObInputAdornments-field:focus-visible {
-	box-shadow: none;
-	outline: none;
-	outline-offset: 0;
-}
+/*
+ * The wrapper is the visual input: it owns the border, background, hover and
+ * focus styling, while the inner Designsystemet input is rendered bare so the
+ * input and the adornments read as a single control.
+ */
+.ObInputAdornments-root {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-gap: 0.25rem;
+	/* A Textfield's font size (`--dsc-input-font-size`) when no `data-size` is given. */
+	--obInputAdornments-fontSize: max(1rem, 1em);
+
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	gap: var(--obInputAdornments-gap);
+	padding: var(--obInputAdornments-padding);
+	inline-size: 100%;
+	color: var(--ds-color-neutral-text-default, #1e2b3c);
+	background-color: var(--ds-color-neutral-surface-default, #fff);
+	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
+	border-radius: var(--ds-border-radius-md, 0.375rem);
+
+	/*
+	 * As tall as a Textfield (`--dsc-input-size`), whatever the adornments are: the bare input and
+	 * any button inside get the height left inside the padding and border, so a full-size
+	 * Designsystemet button no longer makes the control taller than the fields beside it.
+	 */
+	--obInputAdornments-innerSize: calc(
+		var(--ds-size-12) - 2 * var(--obInputAdornments-padding) - 2 * var(--ds-border-width-default, 1px)
+	);
+
+	min-block-size: var(--ds-size-12);
+}
+
+.ObInputAdornments-root > .ds-button {
+	--dsc-button-size: var(--obInputAdornments-innerSize);
+	--dsc-button-padding: 0 var(--ds-size-2);
+}
+
+/* Designsystemet components come in sm, md and lg; xs and xl are typography-only sizes */
+.ObInputAdornments-root[data-size="sm"] {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-2, 0.875rem);
+}
+
+.ObInputAdornments-root[data-size="md"] {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
+}
+
+.ObInputAdornments-root[data-size="lg"] {
+	--obInputAdornments-padding: 0.375rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-4, 1.125rem);
+}
+
+/* The Designsystemet input hover (an inner outline doubling the border), drawn on the wrapper */
+.ObInputAdornments-root:hover:not(
+		:focus-within,
+		:has(.ObInputAdornments-field:disabled, .ObInputAdornments-field[readonly])
+	) {
+	outline: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
+	outline-offset: -0.1px;
+}
+
+.ObInputAdornments-root:has(.ObInputAdornments-field:focus-visible) {
+	box-shadow: var(--dsc-focus-boxShadow);
+	outline: var(--dsc-focus-outline);
+	outline-offset: var(--ds-border-width-focus, 3px);
+}
+
+.ObInputAdornments-root:has(.ObInputAdornments-field:disabled) {
+	cursor: not-allowed;
+	opacity: var(--ds-disabled-opacity, 0.3);
+}
+
+/* The bare input: all the visual styling lives on the wrapper instead */
+.ObInputAdornments-root .ObInputAdornments-field {
+	--dsc-input-size: var(--obInputAdornments-innerSize);
+	/* The text starts where a Textfield's does (its inline padding, inside the wrapper's own). */
+	--dsc-input-padding-inline: calc(var(--ds-size-3) - var(--obInputAdornments-padding));
+
+	flex: 1;
+	min-inline-size: 0;
+	font-size: var(--obInputAdornments-fontSize);
+	background: transparent;
+	border: none;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:disabled {
+	opacity: 1;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:hover {
+	outline: none;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:focus-visible {
+	box-shadow: none;
+	outline: none;
+	outline-offset: 0;
+}