@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/filter/ChipListInput.tsx

@@ -1,79 +1,79 @@
-import { ChipRemovable, Textfield } from "@digdir/designsystemet-react";
-import { useState } from "react";
-import { getLocalizedString } from "../i18n.js";
-
-export type ChipListInputProps = {
-	value: string[];
-	onChange: (value: string[]) => void;
-	readOnly?: boolean;
-	"aria-label": string;
-	"data-size"?: "sm" | "md" | "lg";
-	type?: "text" | "number" | "date" | "datetime-local";
-};
-
-/**
- * Free text editor for the list operators. Values are added with Enter and
- * rendered as removable chips.
- */
-export function ChipListInput({
-	value,
-	onChange,
-	readOnly,
-	type = "text",
-	"aria-label": ariaLabel,
-	"data-size": size,
-}: ChipListInputProps) {
-	let [draft, setDraft] = useState("");
-
-	function commit() {
-		let trimmed = draft.trim();
-		if (!trimmed || value.includes(trimmed)) {
-			setDraft("");
-			return;
-		}
-
-		onChange([...value, trimmed]);
-		setDraft("");
-	}
-
-	function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
-		if (event.key === "Enter") {
-			// The editor is often rendered inside a dialog; committing a value
-			// must not submit or close it.
-			event.preventDefault();
-			commit();
-		} else if (event.key === "Backspace" && draft === "" && value.length > 0) {
-			onChange(value.slice(0, -1));
-		}
-	}
-
-	return (
-		<div className="ObFilterEditor-chipList">
-			{value.map((item, index) => (
-				<ChipRemovable
-					// Values are deduplicated on add, so the value is a stable key.
-					key={item}
-					data-size={size}
-					disabled={readOnly}
-					aria-label={`${getLocalizedString("Remove")} ${item}`}
-					onClick={() => onChange(value.filter((_, i) => i !== index))}
-				>
-					{item}
-				</ChipRemovable>
-			))}
-			{!readOnly && (
-				<Textfield
-					className="ObFilterEditor-chipListInput"
-					aria-label={ariaLabel}
-					data-size={size}
-					type={type}
-					value={draft}
-					placeholder={getLocalizedString("Add value")}
-					onChange={(event) => setDraft(event.target.value)}
-					onKeyDown={handleKeyDown}
-					onBlur={commit}
-				/>
-			)}
-		</div>
-	);
-}
+import { ChipRemovable, Textfield } from "@digdir/designsystemet-react";
+import { useState } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export type ChipListInputProps = {
+	value: string[];
+	onChange: (value: string[]) => void;
+	readOnly?: boolean;
+	"aria-label": string;
+	"data-size"?: "sm" | "md" | "lg";
+	type?: "text" | "number" | "date" | "datetime-local";
+};
+
+/**
+ * Free text editor for the list operators. Values are added with Enter and
+ * rendered as removable chips.
+ */
+export function ChipListInput({
+	value,
+	onChange,
+	readOnly,
+	type = "text",
+	"aria-label": ariaLabel,
+	"data-size": size,
+}: ChipListInputProps) {
+	let [draft, setDraft] = useState("");
+
+	function commit() {
+		let trimmed = draft.trim();
+		if (!trimmed || value.includes(trimmed)) {
+			setDraft("");
+			return;
+		}
+
+		onChange([...value, trimmed]);
+		setDraft("");
+	}
+
+	function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+		if (event.key === "Enter") {
+			// The editor is often rendered inside a dialog; committing a value
+			// must not submit or close it.
+			event.preventDefault();
+			commit();
+		} else if (event.key === "Backspace" && draft === "" && value.length > 0) {
+			onChange(value.slice(0, -1));
+		}
+	}
+
+	return (
+		<div className="ObFilterEditor-chipList">
+			{value.map((item, index) => (
+				<ChipRemovable
+					// Values are deduplicated on add, so the value is a stable key.
+					key={item}
+					data-size={size}
+					disabled={readOnly}
+					aria-label={`${getLocalizedString("Remove")} ${item}`}
+					onClick={() => onChange(value.filter((_, i) => i !== index))}
+				>
+					{item}
+				</ChipRemovable>
+			))}
+			{!readOnly && (
+				<Textfield
+					className="ObFilterEditor-chipListInput"
+					aria-label={ariaLabel}
+					data-size={size}
+					type={type}
+					value={draft}
+					placeholder={getLocalizedString("Add value")}
+					onChange={(event) => setDraft(event.target.value)}
+					onKeyDown={handleKeyDown}
+					onBlur={commit}
+				/>
+			)}
+		</div>
+	);
+}

package/src/filter/FieldFilterPanel.css

@@ -1,150 +1,150 @@
-.ObFieldFilterPanel-root {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-3, 0.75rem);
-
-	/*
-	 * The panel is sized by whatever it is put in — a popover, a dialog, a
-	 * sidebar. It fills that container and lets the distinct list take up the
-	 * slack, so the list grows and shrinks with the container instead of
-	 * carrying a height of its own.
-	 */
-	block-size: 100%;
-	min-block-size: 0;
-}
-
-.ObFieldFilterPanel-heading {
-	font-weight: var(--ds-font-weight-medium, 500);
-	color: var(--ds-color-neutral-text-default);
-}
-
-.ObFieldFilterPanel-criteria {
-	display: flex;
-	flex-direction: column;
-	flex: 0 0 auto;
-	gap: var(--ds-size-2, 0.5rem);
-}
-
-.ObFieldFilterPanel-criterion {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-1, 0.25rem);
-}
-
-/*
- * The filter editor's value cell is written for the filter builder's horizontal
- * rows, where growing is what makes it fill the row. Stacked vertically that
- * same `flex-grow` makes it stretch to fill the whole panel instead.
- */
-.ObFieldFilterPanel-criterion > .ObFilterEditor-valueCell {
-	flex: 0 0 auto;
-}
-
-.ObFieldFilterPanel-distinct {
-	/*
-	 * The parts the section cannot usefully shrink past, named so the floor below
-	 * and the list's own minimum cannot drift apart.
-	 */
-	--obFieldFilterPanel-list-min-size: 8rem;
-	--obFieldFilterPanel-toolbar-size: 2.75rem; /* a `sm` search field */
-	--obFieldFilterPanel-hint-size: 1.25rem; /* one line of truncation hint */
-
-	display: flex;
-	flex-direction: column;
-	flex: 1 1 auto;
-	gap: var(--ds-size-2, 0.5rem);
-	padding-block-start: var(--ds-size-2, 0.5rem);
-	border-block-start: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
-
-	/*
-	 * The section follows the panel's height, but only down to the toolbar, the
-	 * hint and the list's own minimum. Without a floor it kept shrinking while
-	 * the list held its minimum, and since the overflow here is visible the list
-	 * spilled out and painted over the buttons the panel puts after it.
-	 *
-	 * The floor has to be an explicit length. `auto` resolves to min-content, and
-	 * the list is the scroll container, so its min-content height is the whole
-	 * unscrolled list — that would stretch the section to fit every distinct
-	 * value. Once the panel is too short for this, it scrolls instead.
-	 */
-	min-block-size: calc(
-		var(--obFieldFilterPanel-list-min-size) + var(--obFieldFilterPanel-toolbar-size) +
-			var(--obFieldFilterPanel-hint-size) + 2 * var(--ds-size-2, 0.5rem)
-	);
-}
-
-.ObFieldFilterPanel-distinctToolbar {
-	display: flex;
-	flex: 0 0 auto;
-	gap: var(--ds-size-1, 0.25rem);
-	align-items: center;
-}
-
-.ObFieldFilterPanel-distinctToolbar .ds-search {
-	flex: 1;
-	min-inline-size: 0;
-}
-
-/*
- * The active sort is held down, so it is clear which of the two is in effect.
- * Neutral tokens rather than accent ones: the accent scale is only defined
- * inside a `data-color` scope, and the panel can be dropped anywhere.
- */
-.ObFieldFilterPanel-distinctToolbar .ds-button[aria-pressed="true"] {
-	color: var(--ds-color-neutral-text-default, #292c30);
-	background: var(--ds-color-neutral-surface-active, #c9cacb);
-	box-shadow: inset 0 0 0 var(--ds-border-width-default, 1px) var(--ds-color-neutral-border-subtle, #e7e7e7);
-}
-
-/*
- * Both the list and the spinner that replaces it while loading use this box, so
- * the panel does not jump when the values arrive. It is the part that takes up
- * whatever room the container has left, and it never collapses to nothing.
- */
-.ObFieldFilterPanel-valuesBox {
-	flex: 1 1 auto;
-	min-block-size: var(--obFieldFilterPanel-list-min-size, 8rem);
-	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
-	border-radius: var(--ds-border-radius-md, 0.25rem);
-	background: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 2%));
-}
-
-.ObFieldFilterPanel-values {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-1, 0.25rem);
-	margin: 0;
-	padding: var(--ds-size-1, 0.25rem);
-	overflow-y: auto;
-	list-style: none;
-}
-
-.ObFieldFilterPanel-value {
-	padding-inline: var(--ds-size-1, 0.25rem);
-}
-
-.ObFieldFilterPanel-loading {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: var(--ds-size-4, 1rem);
-}
-
-.ObFieldFilterPanel-error {
-	margin: 0;
-	color: var(--ds-color-danger-text-default);
-}
-
-.ObFieldFilterPanel-hint {
-	margin: 0;
-	flex: 0 0 auto;
-	font-size: var(--ds-font-size-1, 0.75rem);
-	color: var(--ds-color-neutral-text-subtle, #68707c);
-}
-
-.ObFieldFilterPanel-actions {
-	display: flex;
-	flex: 0 0 auto;
-	gap: var(--ds-size-2, 0.5rem);
-	justify-content: flex-end;
-}
+.ObFieldFilterPanel-root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-3, 0.75rem);
+
+	/*
+	 * The panel is sized by whatever it is put in — a popover, a dialog, a
+	 * sidebar. It fills that container and lets the distinct list take up the
+	 * slack, so the list grows and shrinks with the container instead of
+	 * carrying a height of its own.
+	 */
+	block-size: 100%;
+	min-block-size: 0;
+}
+
+.ObFieldFilterPanel-heading {
+	font-weight: var(--ds-font-weight-medium, 500);
+	color: var(--ds-color-neutral-text-default);
+}
+
+.ObFieldFilterPanel-criteria {
+	display: flex;
+	flex-direction: column;
+	flex: 0 0 auto;
+	gap: var(--ds-size-2, 0.5rem);
+}
+
+.ObFieldFilterPanel-criterion {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-1, 0.25rem);
+}
+
+/*
+ * The filter editor's value cell is written for the filter builder's horizontal
+ * rows, where growing is what makes it fill the row. Stacked vertically that
+ * same `flex-grow` makes it stretch to fill the whole panel instead.
+ */
+.ObFieldFilterPanel-criterion > .ObFilterEditor-valueCell {
+	flex: 0 0 auto;
+}
+
+.ObFieldFilterPanel-distinct {
+	/*
+	 * The parts the section cannot usefully shrink past, named so the floor below
+	 * and the list's own minimum cannot drift apart.
+	 */
+	--obFieldFilterPanel-list-min-size: 8rem;
+	--obFieldFilterPanel-toolbar-size: 2.75rem; /* a `sm` search field */
+	--obFieldFilterPanel-hint-size: 1.25rem; /* one line of truncation hint */
+
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	gap: var(--ds-size-2, 0.5rem);
+	padding-block-start: var(--ds-size-2, 0.5rem);
+	border-block-start: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
+
+	/*
+	 * The section follows the panel's height, but only down to the toolbar, the
+	 * hint and the list's own minimum. Without a floor it kept shrinking while
+	 * the list held its minimum, and since the overflow here is visible the list
+	 * spilled out and painted over the buttons the panel puts after it.
+	 *
+	 * The floor has to be an explicit length. `auto` resolves to min-content, and
+	 * the list is the scroll container, so its min-content height is the whole
+	 * unscrolled list — that would stretch the section to fit every distinct
+	 * value. Once the panel is too short for this, it scrolls instead.
+	 */
+	min-block-size: calc(
+		var(--obFieldFilterPanel-list-min-size) + var(--obFieldFilterPanel-toolbar-size) +
+			var(--obFieldFilterPanel-hint-size) + 2 * var(--ds-size-2, 0.5rem)
+	);
+}
+
+.ObFieldFilterPanel-distinctToolbar {
+	display: flex;
+	flex: 0 0 auto;
+	gap: var(--ds-size-1, 0.25rem);
+	align-items: center;
+}
+
+.ObFieldFilterPanel-distinctToolbar .ds-search {
+	flex: 1;
+	min-inline-size: 0;
+}
+
+/*
+ * The active sort is held down, so it is clear which of the two is in effect.
+ * Neutral tokens rather than accent ones: the accent scale is only defined
+ * inside a `data-color` scope, and the panel can be dropped anywhere.
+ */
+.ObFieldFilterPanel-distinctToolbar .ds-button[aria-pressed="true"] {
+	color: var(--ds-color-neutral-text-default, #292c30);
+	background: var(--ds-color-neutral-surface-active, #c9cacb);
+	box-shadow: inset 0 0 0 var(--ds-border-width-default, 1px) var(--ds-color-neutral-border-subtle, #e7e7e7);
+}
+
+/*
+ * Both the list and the spinner that replaces it while loading use this box, so
+ * the panel does not jump when the values arrive. It is the part that takes up
+ * whatever room the container has left, and it never collapses to nothing.
+ */
+.ObFieldFilterPanel-valuesBox {
+	flex: 1 1 auto;
+	min-block-size: var(--obFieldFilterPanel-list-min-size, 8rem);
+	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	background: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 2%));
+}
+
+.ObFieldFilterPanel-values {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-1, 0.25rem);
+	margin: 0;
+	padding: var(--ds-size-1, 0.25rem);
+	overflow-y: auto;
+	list-style: none;
+}
+
+.ObFieldFilterPanel-value {
+	padding-inline: var(--ds-size-1, 0.25rem);
+}
+
+.ObFieldFilterPanel-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--ds-size-4, 1rem);
+}
+
+.ObFieldFilterPanel-error {
+	margin: 0;
+	color: var(--ds-color-danger-text-default);
+}
+
+.ObFieldFilterPanel-hint {
+	margin: 0;
+	flex: 0 0 auto;
+	font-size: var(--ds-font-size-1, 0.75rem);
+	color: var(--ds-color-neutral-text-subtle, #68707c);
+}
+
+.ObFieldFilterPanel-actions {
+	display: flex;
+	flex: 0 0 auto;
+	gap: var(--ds-size-2, 0.5rem);
+	justify-content: flex-end;
+}