@olenbetong/appframe-ds 1.6.1 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -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/src/AfLookup/Lookup.css

@@ -1,147 +1,147 @@
-.ObLookup-inputWrap {
-	position: relative;
-
-	.ds-input {
-		padding-inline-end: var(--ObLookup-buttons-width, 3rem);
-	}
-}
-
-.ObLookup-labelTag {
-	margin-inline-start: var(--ds-size-2, 0.5rem);
-}
-
-.ObLookup-buttons {
-	position: absolute;
-	inset-inline-end: 0;
-	inset-block-end: 0;
-	/* Match the .ds-input height so the buttons center on the input row,
-	   also when a label or description is rendered above the input */
-	height: var(--ds-size-12, 3rem);
-	display: flex;
-	align-items: center;
-	padding-inline-end: var(--ds-size-1, 0.25rem);
-}
-
-.ObLookup-dialog {
-	border: 0;
-	margin-block-start: 0;
-	/* Tight: the search field sits at the top edge and the footer buttons carry their own padding */
-	padding: var(--ds-size-3, 0.75rem) var(--ds-size-2, 0.5rem) var(--ds-size-1, 0.25rem);
-	overflow: hidden;
-
-	background-color: var(--ds-color-neutral-background-tinted);
-	color: var(--ds-color-neutral-text-default);
-
-	transition:
-		display 0.2s allow-discrete,
-		transform 0.2s ease-out,
-		scale 0.2s ease-out,
-		opacity 0.2s ease-out;
-
-	&::backdrop {
-		opacity: 0;
-		background: rgb(0 0 0 / 0.2);
-		transition:
-			display 0.2s allow-discrete,
-			opacity 0.2s ease-out;
-	}
-
-	&[open]::backdrop {
-		opacity: 1;
-
-		@starting-style {
-			opacity: 0;
-		}
-	}
-
-	@media (width < 768px) {
-		/*
-		 * A bottom sheet. The UA stylesheet caps a modal dialog at calc(100% - 6px - 2em) and
-		 * centres it with auto margins, which left a gap under the sheet; drop both so the box
-		 * really sits on the bottom edge. dvh follows the mobile browser chrome.
-		 */
-		inset: auto 0.5rem 0;
-		margin: 0;
-		max-height: none;
-
-		border-radius: 1rem 1rem 0 0;
-		height: 90vh;
-		height: 90dvh;
-		width: auto;
-		max-width: 100vw;
-		transform: translateY(100%);
-		z-index: 1500;
-
-		opacity: 0;
-
-		&[open] {
-			transform: translateY(0);
-			opacity: 1;
-
-			@starting-style {
-				transform: translateY(100%);
-				opacity: 0;
-			}
-		}
-	}
-
-	@media (width >= 768px) {
-		inset-block-start: 50%;
-		inset-inline-start: 50%;
-		translate: -50% -50%;
-		scale: 1 0;
-		opacity: 0;
-
-		border-radius: 0.25rem;
-
-		height: clamp(300px, 80vh, 500px);
-		min-width: 320px;
-		width: var(--default-width, 400px);
-
-		&[open] {
-			scale: 1;
-			opacity: 1;
-
-			@starting-style {
-				scale: 1 0;
-				opacity: 0;
-			}
-		}
-	}
-
-	@supports (inset-block-start: anchor(bottom)) {
-		@media (width < 768px) or (pointer: coarse) {
-			anchor-name: unset !important;
-		}
-
-		@media screen and (width >= 768px) and (pointer: fine) {
-			inset-block-start: anchor(bottom);
-			inset-block-end: unset;
-
-			inset-inline-start: anchor(left);
-			inset-inline-end: unset;
-
-			/* Below and to the right of the input when there is room; otherwise above it, or
-			   aligned to its right edge, so an input near the bottom or the right edge of the
-			   viewport still gets a visible dialog. */
-			position-try-fallbacks:
-				flip-block,
-				flip-inline,
-				flip-block flip-inline;
-
-			translate: unset;
-			transform-origin: top left;
-
-			resize: both;
-		}
-	}
-
-	&[data-anchor="manual"] {
-		inset: unset;
-		position: fixed;
-		inset-inline-start: var(--lookup-anchor-inline-start, 50%);
-		inset-block-start: var(--lookup-anchor-block-start, 50%);
-		translate: unset;
-		transform: none;
-	}
-}
+.ObLookup-inputWrap {
+	position: relative;
+
+	.ds-input {
+		padding-inline-end: var(--ObLookup-buttons-width, 3rem);
+	}
+}
+
+.ObLookup-labelTag {
+	margin-inline-start: var(--ds-size-2, 0.5rem);
+}
+
+.ObLookup-buttons {
+	position: absolute;
+	inset-inline-end: 0;
+	inset-block-end: 0;
+	/* Match the .ds-input height so the buttons center on the input row,
+	   also when a label or description is rendered above the input */
+	height: var(--ds-size-12, 3rem);
+	display: flex;
+	align-items: center;
+	padding-inline-end: var(--ds-size-1, 0.25rem);
+}
+
+.ObLookup-dialog {
+	border: 0;
+	margin-block-start: 0;
+	/* Tight: the search field sits at the top edge and the footer buttons carry their own padding */
+	padding: var(--ds-size-3, 0.75rem) var(--ds-size-2, 0.5rem) var(--ds-size-1, 0.25rem);
+	overflow: hidden;
+
+	background-color: var(--ds-color-neutral-background-tinted);
+	color: var(--ds-color-neutral-text-default);
+
+	transition:
+		display 0.2s allow-discrete,
+		transform 0.2s ease-out,
+		scale 0.2s ease-out,
+		opacity 0.2s ease-out;
+
+	&::backdrop {
+		opacity: 0;
+		background: rgb(0 0 0 / 0.2);
+		transition:
+			display 0.2s allow-discrete,
+			opacity 0.2s ease-out;
+	}
+
+	&[open]::backdrop {
+		opacity: 1;
+
+		@starting-style {
+			opacity: 0;
+		}
+	}
+
+	@media (width < 768px) {
+		/*
+		 * A bottom sheet. The UA stylesheet caps a modal dialog at calc(100% - 6px - 2em) and
+		 * centres it with auto margins, which left a gap under the sheet; drop both so the box
+		 * really sits on the bottom edge. dvh follows the mobile browser chrome.
+		 */
+		inset: auto 0.5rem 0;
+		margin: 0;
+		max-height: none;
+
+		border-radius: 1rem 1rem 0 0;
+		height: 90vh;
+		height: 90dvh;
+		width: auto;
+		max-width: 100vw;
+		transform: translateY(100%);
+		z-index: 1500;
+
+		opacity: 0;
+
+		&[open] {
+			transform: translateY(0);
+			opacity: 1;
+
+			@starting-style {
+				transform: translateY(100%);
+				opacity: 0;
+			}
+		}
+	}
+
+	@media (width >= 768px) {
+		inset-block-start: 50%;
+		inset-inline-start: 50%;
+		translate: -50% -50%;
+		scale: 1 0;
+		opacity: 0;
+
+		border-radius: 0.25rem;
+
+		height: clamp(300px, 80vh, 500px);
+		min-width: 320px;
+		width: var(--default-width, 400px);
+
+		&[open] {
+			scale: 1;
+			opacity: 1;
+
+			@starting-style {
+				scale: 1 0;
+				opacity: 0;
+			}
+		}
+	}
+
+	@supports (inset-block-start: anchor(bottom)) {
+		@media (width < 768px) or (pointer: coarse) {
+			anchor-name: unset !important;
+		}
+
+		@media screen and (width >= 768px) and (pointer: fine) {
+			inset-block-start: anchor(bottom);
+			inset-block-end: unset;
+
+			inset-inline-start: anchor(left);
+			inset-inline-end: unset;
+
+			/* Below and to the right of the input when there is room; otherwise above it, or
+			   aligned to its right edge, so an input near the bottom or the right edge of the
+			   viewport still gets a visible dialog. */
+			position-try-fallbacks:
+				flip-block,
+				flip-inline,
+				flip-block flip-inline;
+
+			translate: unset;
+			transform-origin: top left;
+
+			resize: both;
+		}
+	}
+
+	&[data-anchor="manual"] {
+		inset: unset;
+		position: fixed;
+		inset-inline-start: var(--lookup-anchor-inline-start, 50%);
+		inset-block-start: var(--lookup-anchor-block-start, 50%);
+		translate: unset;
+		transform: none;
+	}
+}