@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @olenbetong/appframe-ds
 
+## 1.7.0
+
+### Minor Changes
+
+- 0857c68: `AfGrid` takes `disableLoadingOverlay` to leave out MUI's loading overlay, for grids refreshed on a timer where the overlay keeps blocking text selection; the toolbar's refresh button still shows that it is loading.
+
+### Patch Changes
+
+- d45d019: `AfGrid` row grouping: the grouping column gets AfGrid's own header filter (on the grouped field, when grouped by one field) instead of MUI's default; group rows are tinted and bold; and on group rows the grouping cell spans the empty cells after it, so the label stays readable in a column no wider than its expand toggle.
+
+  The active header filter funnel and the MDI's accents used `--ds-color-accent-*`, which the Synergi themes do not define; they use `--ds-color-brand-*` now.
+
+- 3c9ba6c: Resetting an `AfGrid` layout also restores row grouping and aggregation to the grid's `initialState`. Before, a reset left a user's own grouping and aggregation in place and never brought back the grid's.
+- c99ddd6: `AppMenuItem` hover and press tint with the neutral text colour instead of black, so the hover shows in dark mode too.
+
+## 1.6.1
+
+### Patch Changes
+
+- bd4a806: AfGrid edits `date` and `dateTime` columns in UTC, matching how it displays wall-clock dates. MUI's own editors used local time, so a date entered in Norway was saved as 22:00 the day before (and then shown as the previous day). Columns holding real UTC instants, such as Created/Updated in newer tables, can set `storedAsUtc: true` to be shown and edited in local time instead. A column's own `renderEditCell` still takes precedence.
+
 ## 1.6.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -64,7 +64,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "3.0.0",
     "@base-ui/react": "1.9.0",
     "@olenbetong/appframe-core": "^2.15.2",
-    "@olenbetong/appframe-data": "^1.8.3",
+    "@olenbetong/appframe-data": "^1.8.4",
     "@olenbetong/appframe-react": "^2.2.8",
     "clsx": "^2.1.1",
     "dockview-react": "8.6.1",
@@ -82,7 +82,7 @@
     "@mui/material": "9.5.0",
     "@mui/x-data-grid-premium": "8.29.5",
     "@mui/x-license": "8.29.3",
-    "@navikt/aksel-icons": "8.19.2",
+    "@navikt/aksel-icons": "8.20.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "16.3.3",

package/scripts/copyAssets.mjs

@@ -1,27 +1,27 @@
-/*
- * tsc emits the JavaScript into es/ but not the stylesheets the components import next to
- * themselves. Copy every .css under src/ to the same path under es/, so a new component's
- * stylesheet is published without anyone remembering a list.
- */
-import { cpSync, mkdirSync, readdirSync } from "node:fs";
-import { dirname, join, relative } from "node:path";
-
-function* cssFiles(dir) {
-	for (let entry of readdirSync(dir, { withFileTypes: true })) {
-		let path = join(dir, entry.name);
-		if (entry.isDirectory()) {
-			yield* cssFiles(path);
-		} else if (entry.name.endsWith(".css")) {
-			yield path;
-		}
-	}
-}
-
-let count = 0;
-for (let src of cssFiles("src")) {
-	let dest = join("es", relative("src", src));
-	mkdirSync(dirname(dest), { recursive: true });
-	cpSync(src, dest);
-	count++;
-}
-console.log(`Copied ${count} stylesheets from src/ to es/`);
+/*
+ * tsc emits the JavaScript into es/ but not the stylesheets the components import next to
+ * themselves. Copy every .css under src/ to the same path under es/, so a new component's
+ * stylesheet is published without anyone remembering a list.
+ */
+import { cpSync, mkdirSync, readdirSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+
+function* cssFiles(dir) {
+	for (let entry of readdirSync(dir, { withFileTypes: true })) {
+		let path = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			yield* cssFiles(path);
+		} else if (entry.name.endsWith(".css")) {
+			yield path;
+		}
+	}
+}
+
+let count = 0;
+for (let src of cssFiles("src")) {
+	let dest = join("es", relative("src", src));
+	mkdirSync(dirname(dest), { recursive: true });
+	cpSync(src, dest);
+	count++;
+}
+console.log(`Copied ${count} stylesheets from src/ to es/`);

package/src/autocomplete/Autocomplete.css

@@ -1,253 +1,253 @@
-.ObAutocomplete-root {
-	--obAutocomplete-padding: 0.25rem;
-	--obAutocomplete-gap: 0.25rem;
-
-	display: inline-grid;
-}
-
-/*
- * The root is not a `.ds-field`, so it has to space its label, description,
- * control and validation message itself. Mirrors `.ds-field > * + *`, including
- * the description sitting tight under the label.
- */
-.ObAutocomplete-root > * + * {
-	margin-block-start: var(--ds-size-2);
-}
-
-.ObAutocomplete-root > [data-field="description"] {
-	margin-block-start: 0;
-}
-
-.ObAutocomplete-root[data-full-width="true"] {
-	display: grid;
-	inline-size: 100%;
-}
-
-/*
- * Font size is deliberately never set: `ds-input` inherits its font size when a
- * `data-size` attribute is present, so referencing `--ds-font-size-*` here — which
- * `data-size` rescales — would render the text smaller than a `Textfield` or
- * `Select` of the same size. Only the padding varies per size, and only for the
- * sizes Designsystemet components come in (sm, md, lg; xs and xl are typography-only).
- */
-.ObAutocomplete-root[data-size="sm"] {
-	--obAutocomplete-padding: 0.25rem;
-}
-
-.ObAutocomplete-root[data-size="md"] {
-	--obAutocomplete-padding: 0.25rem;
-}
-
-.ObAutocomplete-root[data-size="lg"] {
-	--obAutocomplete-padding: 0.375rem;
-}
-
-/*
- * The control is the visual input: it owns the border, background, hover and
- * focus styling, so the chips, the bare input and the buttons read as a single
- * control. Mirrors how Designsystemet's Suggestion renders selected chips
- * above the input.
- */
-.ObAutocomplete-control {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	box-sizing: border-box;
-	gap: var(--obAutocomplete-gap);
-	padding: var(--obAutocomplete-padding);
-	inline-size: 100%;
-	/* Matches `--dsc-input-size`, so the control lines up with a Textfield. */
-	min-block-size: var(--ds-size-12);
-	color: var(--ds-color-neutral-text-default);
-	background-color: var(--ds-color-neutral-surface-default);
-	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-default);
-	border-radius: var(--ds-border-radius-md);
-}
-
-.ObAutocomplete-control:hover:not(:focus-within) {
-	border-color: var(--ds-color-neutral-border-strong);
-}
-
-.ObAutocomplete-control:has(.ObAutocomplete-input:focus-visible) {
-	box-shadow: var(--dsc-focus-boxShadow);
-	outline: var(--dsc-focus-outline);
-	outline-offset: var(--ds-border-width-focus);
-}
-
-.ObAutocomplete-control[data-invalid="true"] {
-	border-color: var(--ds-color-danger-border-default);
-}
-
-.ObAutocomplete-control[data-disabled="true"] {
-	cursor: not-allowed;
-	opacity: var(--ds-opacity-disabled);
-}
-
-.ObAutocomplete-chips {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--obAutocomplete-gap);
-	padding: var(--obAutocomplete-padding);
-	padding-block-end: 0;
-}
-
-.ObAutocomplete-inputGroup {
-	display: flex;
-	align-items: center;
-	gap: var(--obAutocomplete-gap);
-	min-inline-size: 0;
-}
-
-.ObAutocomplete-input {
-	flex: 1;
-	min-inline-size: 0;
-	padding: var(--ds-size-1);
-	font: inherit;
-	color: inherit;
-	background: transparent;
-	border: none;
-	outline: none;
-}
-
-.ObAutocomplete-input:disabled {
-	cursor: not-allowed;
-}
-
-.ObAutocomplete-button {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex: none;
-	padding: var(--ds-size-1);
-	color: inherit;
-	background: transparent;
-	border: none;
-	border-radius: var(--ds-border-radius-sm);
-	cursor: pointer;
-}
-
-.ObAutocomplete-button:hover:not(:disabled) {
-	background-color: var(--ds-color-neutral-surface-hover);
-}
-
-.ObAutocomplete-button:disabled {
-	cursor: not-allowed;
-}
-
-.ObAutocomplete-button[data-visible="false"] {
-	display: none;
-}
-
-.ObAutocomplete-trigger[data-popup-open] svg {
-	rotate: 180deg;
-}
-
-.ObAutocomplete-spinner {
-	flex: none;
-	display: inline-flex;
-	align-items: center;
-	padding-inline: var(--ds-size-1);
-}
-
-.ObAutocomplete-positioner {
-	z-index: 1500;
-	/* Base UI renders the positioner even while closed */
-	outline: none;
-}
-
-.ObAutocomplete-popup {
-	box-sizing: border-box;
-	inline-size: var(--anchor-width);
-	max-block-size: min(24rem, var(--available-height));
-	overflow-y: auto;
-	overscroll-behavior: contain;
-	padding: var(--ds-size-1);
-	color: var(--ds-color-neutral-text-default);
-	background-color: var(--ds-color-neutral-surface-default);
-	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
-	border-radius: var(--ds-border-radius-md);
-	box-shadow: var(--ds-shadow-md);
-	transform-origin: var(--transform-origin);
-	transition:
-		opacity 0.12s ease-out,
-		scale 0.12s ease-out;
-}
-
-.ObAutocomplete-popup[data-starting-style],
-.ObAutocomplete-popup[data-ending-style] {
-	opacity: 0;
-	scale: 0.98;
-}
-
-.ObAutocomplete-list {
-	display: flex;
-	flex-direction: column;
-}
-
-.ObAutocomplete-item {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-2);
-	padding: var(--ds-size-2);
-	border-radius: var(--ds-border-radius-sm);
-	cursor: default;
-	user-select: none;
-	scroll-margin-block: var(--ds-size-1);
-}
-
-/*
- * The `accent` colour set does not exist in every Designsystemet theme, and the
- * contextual `--ds-color-*` aliases of the 1.13 token build are gone since 1.21,
- * so the option states use the neutral set explicitly.
- */
-.ObAutocomplete-item[data-highlighted] {
-	color: var(--ds-color-neutral-text-default);
-	background-color: var(--ds-color-neutral-surface-hover);
-}
-
-.ObAutocomplete-item[data-selected] {
-	font-weight: var(--ds-font-weight-medium);
-	color: var(--ds-color-neutral-text-default);
-	background-color: var(--ds-color-neutral-surface-tinted);
-}
-
-.ObAutocomplete-item[data-selected][data-highlighted] {
-	background-color: var(--ds-color-neutral-surface-active);
-}
-
-.ObAutocomplete-item[data-disabled] {
-	cursor: not-allowed;
-	opacity: var(--ds-opacity-disabled);
-}
-
-/*
- * The option's content. It is a flex row rather than the inline box it looks like, because
- * `renderOption` is normally an icon or an avatar beside a block of text — and a block child in an
- * inline parent drops onto its own line, stacking the two instead of setting them side by side.
- */
-.ObAutocomplete-itemContent {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-2);
-	flex: 1;
-	min-inline-size: 0;
-}
-
-.ObAutocomplete-itemIndicator {
-	display: inline-flex;
-	flex: none;
-	inline-size: 1em;
-}
-
-.ObAutocomplete-groupLabel {
-	padding: var(--ds-size-2);
-	font-size: var(--ds-font-size-1);
-	font-weight: var(--ds-font-weight-semibold);
-	color: var(--ds-color-neutral-text-subtle);
-	text-transform: uppercase;
-}
-
-.ObAutocomplete-empty:not(:empty) {
-	padding: var(--ds-size-2);
-	color: var(--ds-color-neutral-text-subtle);
-}
+.ObAutocomplete-root {
+	--obAutocomplete-padding: 0.25rem;
+	--obAutocomplete-gap: 0.25rem;
+
+	display: inline-grid;
+}
+
+/*
+ * The root is not a `.ds-field`, so it has to space its label, description,
+ * control and validation message itself. Mirrors `.ds-field > * + *`, including
+ * the description sitting tight under the label.
+ */
+.ObAutocomplete-root > * + * {
+	margin-block-start: var(--ds-size-2);
+}
+
+.ObAutocomplete-root > [data-field="description"] {
+	margin-block-start: 0;
+}
+
+.ObAutocomplete-root[data-full-width="true"] {
+	display: grid;
+	inline-size: 100%;
+}
+
+/*
+ * Font size is deliberately never set: `ds-input` inherits its font size when a
+ * `data-size` attribute is present, so referencing `--ds-font-size-*` here — which
+ * `data-size` rescales — would render the text smaller than a `Textfield` or
+ * `Select` of the same size. Only the padding varies per size, and only for the
+ * sizes Designsystemet components come in (sm, md, lg; xs and xl are typography-only).
+ */
+.ObAutocomplete-root[data-size="sm"] {
+	--obAutocomplete-padding: 0.25rem;
+}
+
+.ObAutocomplete-root[data-size="md"] {
+	--obAutocomplete-padding: 0.25rem;
+}
+
+.ObAutocomplete-root[data-size="lg"] {
+	--obAutocomplete-padding: 0.375rem;
+}
+
+/*
+ * The control is the visual input: it owns the border, background, hover and
+ * focus styling, so the chips, the bare input and the buttons read as a single
+ * control. Mirrors how Designsystemet's Suggestion renders selected chips
+ * above the input.
+ */
+.ObAutocomplete-control {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	box-sizing: border-box;
+	gap: var(--obAutocomplete-gap);
+	padding: var(--obAutocomplete-padding);
+	inline-size: 100%;
+	/* Matches `--dsc-input-size`, so the control lines up with a Textfield. */
+	min-block-size: var(--ds-size-12);
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-default);
+	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-default);
+	border-radius: var(--ds-border-radius-md);
+}
+
+.ObAutocomplete-control:hover:not(:focus-within) {
+	border-color: var(--ds-color-neutral-border-strong);
+}
+
+.ObAutocomplete-control:has(.ObAutocomplete-input:focus-visible) {
+	box-shadow: var(--dsc-focus-boxShadow);
+	outline: var(--dsc-focus-outline);
+	outline-offset: var(--ds-border-width-focus);
+}
+
+.ObAutocomplete-control[data-invalid="true"] {
+	border-color: var(--ds-color-danger-border-default);
+}
+
+.ObAutocomplete-control[data-disabled="true"] {
+	cursor: not-allowed;
+	opacity: var(--ds-opacity-disabled);
+}
+
+.ObAutocomplete-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--obAutocomplete-gap);
+	padding: var(--obAutocomplete-padding);
+	padding-block-end: 0;
+}
+
+.ObAutocomplete-inputGroup {
+	display: flex;
+	align-items: center;
+	gap: var(--obAutocomplete-gap);
+	min-inline-size: 0;
+}
+
+.ObAutocomplete-input {
+	flex: 1;
+	min-inline-size: 0;
+	padding: var(--ds-size-1);
+	font: inherit;
+	color: inherit;
+	background: transparent;
+	border: none;
+	outline: none;
+}
+
+.ObAutocomplete-input:disabled {
+	cursor: not-allowed;
+}
+
+.ObAutocomplete-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	padding: var(--ds-size-1);
+	color: inherit;
+	background: transparent;
+	border: none;
+	border-radius: var(--ds-border-radius-sm);
+	cursor: pointer;
+}
+
+.ObAutocomplete-button:hover:not(:disabled) {
+	background-color: var(--ds-color-neutral-surface-hover);
+}
+
+.ObAutocomplete-button:disabled {
+	cursor: not-allowed;
+}
+
+.ObAutocomplete-button[data-visible="false"] {
+	display: none;
+}
+
+.ObAutocomplete-trigger[data-popup-open] svg {
+	rotate: 180deg;
+}
+
+.ObAutocomplete-spinner {
+	flex: none;
+	display: inline-flex;
+	align-items: center;
+	padding-inline: var(--ds-size-1);
+}
+
+.ObAutocomplete-positioner {
+	z-index: 1500;
+	/* Base UI renders the positioner even while closed */
+	outline: none;
+}
+
+.ObAutocomplete-popup {
+	box-sizing: border-box;
+	inline-size: var(--anchor-width);
+	max-block-size: min(24rem, var(--available-height));
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	padding: var(--ds-size-1);
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-default);
+	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
+	border-radius: var(--ds-border-radius-md);
+	box-shadow: var(--ds-shadow-md);
+	transform-origin: var(--transform-origin);
+	transition:
+		opacity 0.12s ease-out,
+		scale 0.12s ease-out;
+}
+
+.ObAutocomplete-popup[data-starting-style],
+.ObAutocomplete-popup[data-ending-style] {
+	opacity: 0;
+	scale: 0.98;
+}
+
+.ObAutocomplete-list {
+	display: flex;
+	flex-direction: column;
+}
+
+.ObAutocomplete-item {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-2);
+	padding: var(--ds-size-2);
+	border-radius: var(--ds-border-radius-sm);
+	cursor: default;
+	user-select: none;
+	scroll-margin-block: var(--ds-size-1);
+}
+
+/*
+ * The `accent` colour set does not exist in every Designsystemet theme, and the
+ * contextual `--ds-color-*` aliases of the 1.13 token build are gone since 1.21,
+ * so the option states use the neutral set explicitly.
+ */
+.ObAutocomplete-item[data-highlighted] {
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-hover);
+}
+
+.ObAutocomplete-item[data-selected] {
+	font-weight: var(--ds-font-weight-medium);
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-tinted);
+}
+
+.ObAutocomplete-item[data-selected][data-highlighted] {
+	background-color: var(--ds-color-neutral-surface-active);
+}
+
+.ObAutocomplete-item[data-disabled] {
+	cursor: not-allowed;
+	opacity: var(--ds-opacity-disabled);
+}
+
+/*
+ * The option's content. It is a flex row rather than the inline box it looks like, because
+ * `renderOption` is normally an icon or an avatar beside a block of text — and a block child in an
+ * inline parent drops onto its own line, stacking the two instead of setting them side by side.
+ */
+.ObAutocomplete-itemContent {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-2);
+	flex: 1;
+	min-inline-size: 0;
+}
+
+.ObAutocomplete-itemIndicator {
+	display: inline-flex;
+	flex: none;
+	inline-size: 1em;
+}
+
+.ObAutocomplete-groupLabel {
+	padding: var(--ds-size-2);
+	font-size: var(--ds-font-size-1);
+	font-weight: var(--ds-font-weight-semibold);
+	color: var(--ds-color-neutral-text-subtle);
+	text-transform: uppercase;
+}
+
+.ObAutocomplete-empty:not(:empty) {
+	padding: var(--ds-size-2);
+	color: var(--ds-color-neutral-text-subtle);
+}