@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/filter/SavedFilterTree.css

@@ -1,107 +1,107 @@
-/*
- * Colours use the contextual `--ds-color-*` aliases so the tree follows the
- * active colour scheme. Never add hex fallbacks — they only encode the light
- * theme and silently mask misspelled tokens.
- */
-
-.ObSavedFilterTree-root,
-.ObSavedFilterTree-children {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-
-.ObSavedFilterTree-children {
-	/*
-	 * A branch is chevron + icon, a child only an icon, so matching the branch
-	 * indent would put a child's icon under its parent's icon and make the two
-	 * levels look like one. Indent past the branch icon instead, so a child's
-	 * icon starts where its parent's label does.
-	 */
-	margin-inline-start: calc(var(--ds-size-6) + var(--ds-size-1) + var(--ds-size-6));
-}
-
-.ObSavedFilterTree-item {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-1);
-}
-
-.ObSavedFilterTree-node {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-1);
-	flex: 1;
-	min-inline-size: 0;
-	padding: var(--ds-size-1) var(--ds-size-2);
-	border: none;
-	border-radius: var(--ds-border-radius-sm);
-	background: none;
-	color: var(--ds-color-neutral-text-default);
-	font: inherit;
-	text-align: start;
-	cursor: pointer;
-}
-
-.ObSavedFilterTree-node:hover {
-	background: var(--ds-color-neutral-surface-hover);
-}
-
-.ObSavedFilterTree-node:focus-visible {
-	outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
-	outline-offset: var(--ds-border-width-focus);
-}
-
-.ObSavedFilterTree-selected {
-	background: var(--ds-color-neutral-surface-active);
-}
-
-.ObSavedFilterTree-dirty .ObSavedFilterTree-label {
-	font-weight: var(--ds-font-weight-semibold);
-}
-
-.ObSavedFilterTree-chevron,
-.ObSavedFilterTree-icon {
-	display: inline-flex;
-	flex: none;
-	align-items: center;
-	justify-content: center;
-	inline-size: var(--ds-size-6);
-	block-size: var(--ds-size-6);
-	color: var(--ds-color-neutral-text-subtle);
-}
-
-.ObSavedFilterTree-chevron > *,
-.ObSavedFilterTree-icon > * {
-	inline-size: 100%;
-	block-size: 100%;
-}
-
-.ObSavedFilterTree-label {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.ObSavedFilterTree-empty {
-	/* Lines up with the child labels, past their icon. */
-	padding: var(--ds-size-1) var(--ds-size-2) var(--ds-size-1)
-		calc(var(--ds-size-2) + var(--ds-size-6) + var(--ds-size-1));
-	color: var(--ds-color-neutral-text-subtle);
-	font-style: italic;
-}
-
-/*
- * The menu button only appears on hover/focus on pointer devices; on touch it is
- * always visible because there is no hover to reveal it.
- */
-@media (hover: hover) {
-	.ObSavedFilterTree-menuButton {
-		visibility: hidden;
-	}
-
-	.ObSavedFilterTree-item:hover .ObSavedFilterTree-menuButton,
-	.ObSavedFilterTree-item:focus-within .ObSavedFilterTree-menuButton {
-		visibility: visible;
-	}
-}
+/*
+ * Colours use the contextual `--ds-color-*` aliases so the tree follows the
+ * active colour scheme. Never add hex fallbacks — they only encode the light
+ * theme and silently mask misspelled tokens.
+ */
+
+.ObSavedFilterTree-root,
+.ObSavedFilterTree-children {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.ObSavedFilterTree-children {
+	/*
+	 * A branch is chevron + icon, a child only an icon, so matching the branch
+	 * indent would put a child's icon under its parent's icon and make the two
+	 * levels look like one. Indent past the branch icon instead, so a child's
+	 * icon starts where its parent's label does.
+	 */
+	margin-inline-start: calc(var(--ds-size-6) + var(--ds-size-1) + var(--ds-size-6));
+}
+
+.ObSavedFilterTree-item {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-1);
+}
+
+.ObSavedFilterTree-node {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-1);
+	flex: 1;
+	min-inline-size: 0;
+	padding: var(--ds-size-1) var(--ds-size-2);
+	border: none;
+	border-radius: var(--ds-border-radius-sm);
+	background: none;
+	color: var(--ds-color-neutral-text-default);
+	font: inherit;
+	text-align: start;
+	cursor: pointer;
+}
+
+.ObSavedFilterTree-node:hover {
+	background: var(--ds-color-neutral-surface-hover);
+}
+
+.ObSavedFilterTree-node:focus-visible {
+	outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
+	outline-offset: var(--ds-border-width-focus);
+}
+
+.ObSavedFilterTree-selected {
+	background: var(--ds-color-neutral-surface-active);
+}
+
+.ObSavedFilterTree-dirty .ObSavedFilterTree-label {
+	font-weight: var(--ds-font-weight-semibold);
+}
+
+.ObSavedFilterTree-chevron,
+.ObSavedFilterTree-icon {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	inline-size: var(--ds-size-6);
+	block-size: var(--ds-size-6);
+	color: var(--ds-color-neutral-text-subtle);
+}
+
+.ObSavedFilterTree-chevron > *,
+.ObSavedFilterTree-icon > * {
+	inline-size: 100%;
+	block-size: 100%;
+}
+
+.ObSavedFilterTree-label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ObSavedFilterTree-empty {
+	/* Lines up with the child labels, past their icon. */
+	padding: var(--ds-size-1) var(--ds-size-2) var(--ds-size-1)
+		calc(var(--ds-size-2) + var(--ds-size-6) + var(--ds-size-1));
+	color: var(--ds-color-neutral-text-subtle);
+	font-style: italic;
+}
+
+/*
+ * The menu button only appears on hover/focus on pointer devices; on touch it is
+ * always visible because there is no hover to reveal it.
+ */
+@media (hover: hover) {
+	.ObSavedFilterTree-menuButton {
+		visibility: hidden;
+	}
+
+	.ObSavedFilterTree-item:hover .ObSavedFilterTree-menuButton,
+	.ObSavedFilterTree-item:focus-within .ObSavedFilterTree-menuButton {
+		visibility: visible;
+	}
+}

package/src/filter/SavedFilterTree.test.tsx

@@ -1,94 +1,94 @@
-import type { SavedFilter } from "@olenbetong/appframe-core";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
-import { SavedFilterTree } from "./SavedFilterTree.js";
-
-function savedFilter(overrides: Partial<SavedFilter> & Pick<SavedFilter, "filterId" | "name">): SavedFilter {
-	return {
-		primKey: `pk-${overrides.filterId}`,
-		criteria: "",
-		dbObjectId: "aviw_Test_View",
-		accessLevel: "Manager",
-		createdByUser: true,
-		createdBy: "bvh",
-		domain: "OB",
-		crossDomain: false,
-		isPersonallyShared: false,
-		hideCriteria: false,
-		headerText: null,
-		comment: null,
-		parameters: null,
-		reportTitle: null,
-		created: null,
-		updated: null,
-		...overrides,
-	};
-}
-
-const MINE = [savedFilter({ filterId: 1, name: "Agder" })];
-const SHARED = [
-	savedFilter({ filterId: 2, name: "Alle ledere", createdByUser: false, createdBy: "ola", accessLevel: "Reader" }),
-];
-
-function renderTree(props: Partial<React.ComponentProps<typeof SavedFilterTree>> = {}) {
-	let onChange = vi.fn();
-	render(<SavedFilterTree mine={MINE} shared={SHARED} value={null} onChange={onChange} {...props} />);
-
-	return { onChange };
-}
-
-describe("SavedFilterTree", () => {
-	it("renders the three fixed nodes and their filters", () => {
-		renderTree();
-
-		expect(screen.getByRole("button", { name: "New Filter" })).toBeTruthy();
-		expect(screen.getByRole("button", { name: /My Filters/ })).toBeTruthy();
-		expect(screen.getByRole("button", { name: /Shared With Me/ })).toBeTruthy();
-		expect(screen.getByRole("button", { name: "Agder" })).toBeTruthy();
-		expect(screen.getByRole("button", { name: "Alle ledere" })).toBeTruthy();
-	});
-
-	it("reports the selected filter id", async () => {
-		let { onChange } = renderTree();
-		await userEvent.click(screen.getByRole("button", { name: "Agder" }));
-
-		expect(onChange).toHaveBeenCalledWith(1);
-	});
-
-	it("reports null when the new filter node is selected", async () => {
-		let { onChange } = renderTree({ value: 1 });
-		await userEvent.click(screen.getByRole("button", { name: "New Filter" }));
-
-		expect(onChange).toHaveBeenCalledWith(null);
-	});
-
-	it("collapses a branch", async () => {
-		renderTree();
-		await userEvent.click(screen.getByRole("button", { name: /My Filters/ }));
-
-		expect(screen.queryByRole("button", { name: "Agder" })).toBeNull();
-	});
-
-	it("offers rename and delete for the user's own filters", async () => {
-		let onRename = vi.fn();
-		renderTree({ onRename, onDelete: vi.fn() });
-		await userEvent.click(screen.getByRole("button", { name: "Options for Agder" }));
-		await userEvent.click(screen.getByRole("button", { name: "Rename" }));
-
-		expect(onRename).toHaveBeenCalledWith(MINE[0]);
-	});
-
-	it("does not offer rename or delete for filters created by someone else", () => {
-		renderTree({ onRename: vi.fn(), onDelete: vi.fn() });
-
-		expect(screen.queryByRole("button", { name: "Options for Alle ledere" })).toBeNull();
-	});
-
-	it("still offers info for filters created by someone else", () => {
-		renderTree({ onShowInfo: vi.fn() });
-
-		expect(screen.getByRole("button", { name: "Options for Alle ledere" })).toBeTruthy();
-	});
-});
+import type { SavedFilter } from "@olenbetong/appframe-core";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { SavedFilterTree } from "./SavedFilterTree.js";
+
+function savedFilter(overrides: Partial<SavedFilter> & Pick<SavedFilter, "filterId" | "name">): SavedFilter {
+	return {
+		primKey: `pk-${overrides.filterId}`,
+		criteria: "",
+		dbObjectId: "aviw_Test_View",
+		accessLevel: "Manager",
+		createdByUser: true,
+		createdBy: "bvh",
+		domain: "OB",
+		crossDomain: false,
+		isPersonallyShared: false,
+		hideCriteria: false,
+		headerText: null,
+		comment: null,
+		parameters: null,
+		reportTitle: null,
+		created: null,
+		updated: null,
+		...overrides,
+	};
+}
+
+const MINE = [savedFilter({ filterId: 1, name: "Agder" })];
+const SHARED = [
+	savedFilter({ filterId: 2, name: "Alle ledere", createdByUser: false, createdBy: "ola", accessLevel: "Reader" }),
+];
+
+function renderTree(props: Partial<React.ComponentProps<typeof SavedFilterTree>> = {}) {
+	let onChange = vi.fn();
+	render(<SavedFilterTree mine={MINE} shared={SHARED} value={null} onChange={onChange} {...props} />);
+
+	return { onChange };
+}
+
+describe("SavedFilterTree", () => {
+	it("renders the three fixed nodes and their filters", () => {
+		renderTree();
+
+		expect(screen.getByRole("button", { name: "New Filter" })).toBeTruthy();
+		expect(screen.getByRole("button", { name: /My Filters/ })).toBeTruthy();
+		expect(screen.getByRole("button", { name: /Shared With Me/ })).toBeTruthy();
+		expect(screen.getByRole("button", { name: "Agder" })).toBeTruthy();
+		expect(screen.getByRole("button", { name: "Alle ledere" })).toBeTruthy();
+	});
+
+	it("reports the selected filter id", async () => {
+		let { onChange } = renderTree();
+		await userEvent.click(screen.getByRole("button", { name: "Agder" }));
+
+		expect(onChange).toHaveBeenCalledWith(1);
+	});
+
+	it("reports null when the new filter node is selected", async () => {
+		let { onChange } = renderTree({ value: 1 });
+		await userEvent.click(screen.getByRole("button", { name: "New Filter" }));
+
+		expect(onChange).toHaveBeenCalledWith(null);
+	});
+
+	it("collapses a branch", async () => {
+		renderTree();
+		await userEvent.click(screen.getByRole("button", { name: /My Filters/ }));
+
+		expect(screen.queryByRole("button", { name: "Agder" })).toBeNull();
+	});
+
+	it("offers rename and delete for the user's own filters", async () => {
+		let onRename = vi.fn();
+		renderTree({ onRename, onDelete: vi.fn() });
+		await userEvent.click(screen.getByRole("button", { name: "Options for Agder" }));
+		await userEvent.click(screen.getByRole("button", { name: "Rename" }));
+
+		expect(onRename).toHaveBeenCalledWith(MINE[0]);
+	});
+
+	it("does not offer rename or delete for filters created by someone else", () => {
+		renderTree({ onRename: vi.fn(), onDelete: vi.fn() });
+
+		expect(screen.queryByRole("button", { name: "Options for Alle ledere" })).toBeNull();
+	});
+
+	it("still offers info for filters created by someone else", () => {
+		renderTree({ onShowInfo: vi.fn() });
+
+		expect(screen.getByRole("button", { name: "Options for Alle ledere" })).toBeTruthy();
+	});
+});