@olenbetong/appframe-ds 1.2.0 → 1.3.0

package/src/filter/FilterNameDialog.tsx

@@ -1,81 +1,81 @@
-import "./FilterNameDialog.css";
-
-import { Button, Dialog, Heading, Textfield } from "@digdir/designsystemet-react";
-import { useEffect, useState } from "react";
-import { getLocalizedString } from "../i18n.js";
-
-export type FilterNameDialogProps = {
-	open: boolean;
-	/** Pre-fills the field, e.g. with the current filter's name. */
-	defaultName?: string;
-	/** Names already in use; entering one asks the user to confirm the overwrite. */
-	existingNames?: string[];
-	onCancel: () => void;
-	onSubmit: (name: string) => void;
-	"data-size"?: "sm" | "md" | "lg";
-};
-
-/**
- * Asks for the name to save a filter under.
- *
- * Reusing an existing name overwrites that filter, so the dialog warns before
- * submitting rather than silently creating a second filter with the same name.
- */
-export function FilterNameDialog({
-	open,
-	defaultName = "",
-	existingNames = [],
-	onCancel,
-	onSubmit,
-	"data-size": size = "sm",
-}: FilterNameDialogProps) {
-	let [name, setName] = useState(defaultName);
-
-	useEffect(() => {
-		if (open) setName(defaultName);
-	}, [open, defaultName]);
-
-	let trimmed = name.trim();
-	// A filter keeping its own name is an update, not a collision.
-	let collides = trimmed !== defaultName && existingNames.some((existing) => existing === trimmed);
-
-	function handleSubmit(event: React.FormEvent) {
-		event.preventDefault();
-		if (!trimmed) return;
-
-		onSubmit(trimmed);
-	}
-
-	return (
-		<Dialog open={open} closedby="any" data-size={size} className="ObFilterNameDialog-root" onClose={onCancel}>
-			<form onSubmit={handleSubmit}>
-				<Dialog.Block>
-					<Heading level={2} data-size="xs">
-						{getLocalizedString("Save filter")}
-					</Heading>
-				</Dialog.Block>
-				<Dialog.Block>
-					<Textfield
-						// oxlint-disable-next-line jsx-a11y/no-autofocus -- the field is the only control in the dialog
-						autoFocus
-						data-size={size}
-						label={getLocalizedString("Filter name")}
-						value={name}
-						error={
-							collides ? getLocalizedString("A filter with this name already exists and will be replaced.") : undefined
-						}
-						onChange={(event) => setName(event.currentTarget.value)}
-					/>
-				</Dialog.Block>
-				<Dialog.Block className="ObFilterNameDialog-actions">
-					<Button type="submit" data-size={size} disabled={!trimmed}>
-						{collides ? getLocalizedString("Replace") : getLocalizedString("Save")}
-					</Button>
-					<Button type="button" variant="secondary" data-size={size} onClick={onCancel}>
-						{getLocalizedString("Cancel")}
-					</Button>
-				</Dialog.Block>
-			</form>
-		</Dialog>
-	);
-}
+import "./FilterNameDialog.css";
+
+import { Button, Dialog, Heading, Textfield } from "@digdir/designsystemet-react";
+import { useEffect, useState } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export type FilterNameDialogProps = {
+	open: boolean;
+	/** Pre-fills the field, e.g. with the current filter's name. */
+	defaultName?: string;
+	/** Names already in use; entering one asks the user to confirm the overwrite. */
+	existingNames?: string[];
+	onCancel: () => void;
+	onSubmit: (name: string) => void;
+	"data-size"?: "sm" | "md" | "lg";
+};
+
+/**
+ * Asks for the name to save a filter under.
+ *
+ * Reusing an existing name overwrites that filter, so the dialog warns before
+ * submitting rather than silently creating a second filter with the same name.
+ */
+export function FilterNameDialog({
+	open,
+	defaultName = "",
+	existingNames = [],
+	onCancel,
+	onSubmit,
+	"data-size": size = "sm",
+}: FilterNameDialogProps) {
+	let [name, setName] = useState(defaultName);
+
+	useEffect(() => {
+		if (open) setName(defaultName);
+	}, [open, defaultName]);
+
+	let trimmed = name.trim();
+	// A filter keeping its own name is an update, not a collision.
+	let collides = trimmed !== defaultName && existingNames.some((existing) => existing === trimmed);
+
+	function handleSubmit(event: React.FormEvent) {
+		event.preventDefault();
+		if (!trimmed) return;
+
+		onSubmit(trimmed);
+	}
+
+	return (
+		<Dialog open={open} closedby="any" data-size={size} className="ObFilterNameDialog-root" onClose={onCancel}>
+			<form onSubmit={handleSubmit}>
+				<Dialog.Block>
+					<Heading level={2} data-size="xs">
+						{getLocalizedString("Save filter")}
+					</Heading>
+				</Dialog.Block>
+				<Dialog.Block>
+					<Textfield
+						// oxlint-disable-next-line jsx-a11y/no-autofocus -- the field is the only control in the dialog
+						autoFocus
+						data-size={size}
+						label={getLocalizedString("Filter name")}
+						value={name}
+						error={
+							collides ? getLocalizedString("A filter with this name already exists and will be replaced.") : undefined
+						}
+						onChange={(event) => setName(event.currentTarget.value)}
+					/>
+				</Dialog.Block>
+				<Dialog.Block className="ObFilterNameDialog-actions">
+					<Button type="submit" data-size={size} disabled={!trimmed}>
+						{collides ? getLocalizedString("Replace") : getLocalizedString("Save")}
+					</Button>
+					<Button type="button" variant="secondary" data-size={size} onClick={onCancel}>
+						{getLocalizedString("Cancel")}
+					</Button>
+				</Dialog.Block>
+			</form>
+		</Dialog>
+	);
+}

package/src/filter/FilterRow.tsx

@@ -1,117 +1,117 @@
-import { Select } from "@digdir/designsystemet-react";
-import { XMarkIcon } from "@navikt/aksel-icons";
-import {
-	changeOperator,
-	createExpression,
-	type FieldMetadata,
-	type FilterExpression,
-	type FilterOperator,
-	getOperatorLabel,
-	getOperatorsForField,
-	normalizeOperator,
-} from "@olenbetong/appframe-core";
-import { Combobox } from "../autocomplete/index.js";
-
-import { FilterValueEditor } from "./FilterValueEditor.js";
-import type { FilterEditorSize, GetFieldOptions } from "./types.js";
-import { getLocalizedString } from "../i18n.js";
-
-export function getFieldLabel(field: FieldMetadata) {
-	return field.caption || field.name;
-}
-
-export type FilterRowProps = {
-	expression: FilterExpression;
-	fields: FieldMetadata[];
-	onChange: (expression: FilterExpression) => void;
-	onRemove: () => void;
-	getFieldOptions?: GetFieldOptions;
-	readOnly?: boolean;
-	"data-size"?: FilterEditorSize;
-};
-
-/** A single `field operator value` row. */
-export function FilterRow({
-	expression,
-	fields,
-	onChange,
-	onRemove,
-	getFieldOptions,
-	readOnly,
-	"data-size": size = "sm",
-}: FilterRowProps) {
-	let field = fields.find((item) => item.name === expression.column);
-	let operator = normalizeOperator(expression.operator);
-	// A filter can reference a field that is no longer in the view. Keep the row
-	// editable by falling back to a string field rather than dropping it.
-	let effectiveField: FieldMetadata = field ?? { name: expression.column, type: "string" };
-	let operators = getOperatorsForField(effectiveField);
-
-	if (!operators.includes(operator)) {
-		operators = [...operators, operator];
-	}
-
-	function handleFieldChange(next: FieldMetadata | null) {
-		if (!next) return;
-
-		// Keep the operator when the new field supports it, so switching between
-		// two fields of the same type does not reset the row.
-		let operators = getOperatorsForField(next);
-		let keep = operators.includes(operator) ? operator : undefined;
-		let created = createExpression(next, keep);
-
-		onChange(keep ? { ...created, value: expression.value, valueType: expression.valueType } : created);
-	}
-
-	return (
-		<div className="ObFilterEditor-row">
-			<Combobox
-				className="ObFilterEditor-field"
-				data-size={size}
-				readOnly={readOnly}
-				disableClearable
-				aria-label={getLocalizedString("Field")}
-				placeholder={getLocalizedString("Select field")}
-				options={fields}
-				getOptionLabel={getFieldLabel}
-				getOptionKey={(option) => option.name}
-				isOptionEqualToValue={(a, b) => a.name === b.name}
-				value={effectiveField}
-				onChange={(_event, next) => handleFieldChange(next)}
-			/>
-			<Select
-				className="ObFilterEditor-operator"
-				data-size={size}
-				disabled={readOnly}
-				aria-label={getLocalizedString("Operator")}
-				value={operator}
-				onChange={(event) => onChange(changeOperator(expression, event.target.value as FilterOperator, effectiveField))}
-			>
-				{operators.map((item) => (
-					<Select.Option key={item} value={item}>
-						{getOperatorLabel(item, effectiveField.type)}
-					</Select.Option>
-				))}
-			</Select>
-			<FilterValueEditor
-				expression={expression}
-				field={effectiveField}
-				options={field ? getFieldOptions?.(field) : undefined}
-				onChange={onChange}
-				readOnly={readOnly}
-				data-size={size}
-			/>
-			{!readOnly && (
-				<button
-					type="button"
-					className="ObFilterEditor-iconButton"
-					title={getLocalizedString("Remove condition")}
-					aria-label={getLocalizedString("Remove condition")}
-					onClick={onRemove}
-				>
-					<XMarkIcon aria-hidden />
-				</button>
-			)}
-		</div>
-	);
-}
+import { Select } from "@digdir/designsystemet-react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import {
+	changeOperator,
+	createExpression,
+	type FieldMetadata,
+	type FilterExpression,
+	type FilterOperator,
+	getOperatorLabel,
+	getOperatorsForField,
+	normalizeOperator,
+} from "@olenbetong/appframe-core";
+import { Combobox } from "../autocomplete/index.js";
+
+import { FilterValueEditor } from "./FilterValueEditor.js";
+import type { FilterEditorSize, GetFieldOptions } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
+
+export function getFieldLabel(field: FieldMetadata) {
+	return field.caption || field.name;
+}
+
+export type FilterRowProps = {
+	expression: FilterExpression;
+	fields: FieldMetadata[];
+	onChange: (expression: FilterExpression) => void;
+	onRemove: () => void;
+	getFieldOptions?: GetFieldOptions;
+	readOnly?: boolean;
+	"data-size"?: FilterEditorSize;
+};
+
+/** A single `field operator value` row. */
+export function FilterRow({
+	expression,
+	fields,
+	onChange,
+	onRemove,
+	getFieldOptions,
+	readOnly,
+	"data-size": size = "sm",
+}: FilterRowProps) {
+	let field = fields.find((item) => item.name === expression.column);
+	let operator = normalizeOperator(expression.operator);
+	// A filter can reference a field that is no longer in the view. Keep the row
+	// editable by falling back to a string field rather than dropping it.
+	let effectiveField: FieldMetadata = field ?? { name: expression.column, type: "string" };
+	let operators = getOperatorsForField(effectiveField);
+
+	if (!operators.includes(operator)) {
+		operators = [...operators, operator];
+	}
+
+	function handleFieldChange(next: FieldMetadata | null) {
+		if (!next) return;
+
+		// Keep the operator when the new field supports it, so switching between
+		// two fields of the same type does not reset the row.
+		let operators = getOperatorsForField(next);
+		let keep = operators.includes(operator) ? operator : undefined;
+		let created = createExpression(next, keep);
+
+		onChange(keep ? { ...created, value: expression.value, valueType: expression.valueType } : created);
+	}
+
+	return (
+		<div className="ObFilterEditor-row">
+			<Combobox
+				className="ObFilterEditor-field"
+				data-size={size}
+				readOnly={readOnly}
+				disableClearable
+				aria-label={getLocalizedString("Field")}
+				placeholder={getLocalizedString("Select field")}
+				options={fields}
+				getOptionLabel={getFieldLabel}
+				getOptionKey={(option) => option.name}
+				isOptionEqualToValue={(a, b) => a.name === b.name}
+				value={effectiveField}
+				onChange={(_event, next) => handleFieldChange(next)}
+			/>
+			<Select
+				className="ObFilterEditor-operator"
+				data-size={size}
+				disabled={readOnly}
+				aria-label={getLocalizedString("Operator")}
+				value={operator}
+				onChange={(event) => onChange(changeOperator(expression, event.target.value as FilterOperator, effectiveField))}
+			>
+				{operators.map((item) => (
+					<Select.Option key={item} value={item}>
+						{getOperatorLabel(item, effectiveField.type)}
+					</Select.Option>
+				))}
+			</Select>
+			<FilterValueEditor
+				expression={expression}
+				field={effectiveField}
+				options={field ? getFieldOptions?.(field) : undefined}
+				onChange={onChange}
+				readOnly={readOnly}
+				data-size={size}
+			/>
+			{!readOnly && (
+				<button
+					type="button"
+					className="ObFilterEditor-iconButton"
+					title={getLocalizedString("Remove condition")}
+					aria-label={getLocalizedString("Remove condition")}
+					onClick={onRemove}
+				>
+					<XMarkIcon aria-hidden />
+				</button>
+			)}
+		</div>
+	);
+}

package/src/filter/FilterShareDialog.css

@@ -1,28 +1,28 @@
-/*
- * Colours use the contextual `--ds-color-*` aliases so the dialog follows the
- * active colour scheme. Never add hex fallbacks.
- */
-
-.ObFilterShareDialog-root {
-	inline-size: min(40rem, 100%);
-}
-
-.ObFilterShareDialog-candidate {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-2);
-}
-
-.ObFilterShareDialog-candidateLogin {
-	margin-inline-start: auto;
-	color: var(--ds-color-neutral-text-subtle);
-}
-
-.ObFilterShareDialog-table {
-	inline-size: 100%;
-}
-
-.ObFilterShareDialog-error {
-	margin: 0 0 var(--ds-size-2);
-	color: var(--ds-color-danger-text-default);
-}
+/*
+ * Colours use the contextual `--ds-color-*` aliases so the dialog follows the
+ * active colour scheme. Never add hex fallbacks.
+ */
+
+.ObFilterShareDialog-root {
+	inline-size: min(40rem, 100%);
+}
+
+.ObFilterShareDialog-candidate {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-2);
+}
+
+.ObFilterShareDialog-candidateLogin {
+	margin-inline-start: auto;
+	color: var(--ds-color-neutral-text-subtle);
+}
+
+.ObFilterShareDialog-table {
+	inline-size: 100%;
+}
+
+.ObFilterShareDialog-error {
+	margin: 0 0 var(--ds-size-2);
+	color: var(--ds-color-danger-text-default);
+}