@olenbetong/appframe-ds 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olenbetong/appframe-ds
 
+## 1.3.0
+
+### Minor Changes
+
+- 16232b8: The 1.2.0 on npm was published from a checkout that predates its own changelog: it carries neither the cut-off family (`CutOffPicker`, `CutOffProvider`, `useCutOff`, the period helpers), `ResponsiveDialog`, `PageTitle`, `Link`, `GridEditLookup` and the `DataGrid` namespace on the grid entry, nor the `PageContainer` `maxWidth` fix and the server-side grid totals following the filters on paged data objects. This version is the first on npm with all of it.
+
 ## 1.2.0
 
 ### Minor Changes
@@ -7,6 +13,11 @@
 - b38f806: Three more `@olenbetong/appframe-mui` equivalents, so apps can drop that package: the cut-off period family (`CutOffPicker`, `CutOffProvider`, `useCutOff`, `cutOffToPlainDate`, `plainDateToCutOff`, `getPeriodLabel`, the range helpers and `PeriodType`), `ResponsiveDialog` (a Designsystemet `Dialog` that fills small screens, decided by CSS), and `PageTitle` (a Designsystemet `Heading`). Also `Link` (a Designsystemet link that navigates with react-router), `GridEditLookup` for `@olenbetong/appframe-ds/grid`, and MUI X re-exported from the grid entry as the `DataGrid` namespace, so a platform app never bundles its own copy. The cut-off utilities use Temporal for ISO weeks; the package now depends on `temporal-polyfill`.
 - cd7fc4f: Add label tag support with optional and required indicators.
 
+### Patch Changes
+
+- cc4bdf4: `PageContainer` honours its `maxWidth` prop again. The prop was accepted and dropped, so every page that asked for `sm`, `md`, `lg` or `xl` rendered full width; it now limits the content to the MUI Container scale (36/48/64/80rem plus the gutters), against the leading edge as before.
+- 91838e7: Server-side grid totals now follow the filters on a dynamically loading data object. `useAfServerAggregation` reloaded only on `onDataLoaded`, which a paged data object never fires, so the totals kept the values from the first load; it now also reloads when a paged load starts over (`onPartialDataLoaded` with `skip` 0). `AfGrid` also passes MUI's default `getAggregationPosition`, the one prop that makes the grid re-aggregate when the aggregation functions change, so the footer shows the totals as they arrive instead of those of the previous load.
+
 ## 1.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -71,9 +71,9 @@
     "react-dom": "19.3.0",
     "react-window": "2.3.1",
     "temporal-polyfill": "1.0.5",
+    "@olenbetong/appframe-react": "2.2.1",
     "@olenbetong/appframe-core": "2.14.0",
-    "@olenbetong/appframe-data": "1.7.2",
-    "@olenbetong/appframe-react": "2.2.1"
+    "@olenbetong/appframe-data": "1.7.2"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.22.0",

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/AfLookup/Lookup.css

@@ -1,129 +1,129 @@
-.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;
-	padding: 1rem;
-	overflow: hidden;
-
-	background-color: whitesmoke;
-
-	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) {
-		inset: 10vh 0.5rem 0;
-
-		border-radius: 1rem 1rem 0 0;
-		height: 90vh;
-		width: calc(100vw - 1rem);
-		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;
-
-			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;
+	padding: 1rem;
+	overflow: hidden;
+
+	background-color: whitesmoke;
+
+	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) {
+		inset: 10vh 0.5rem 0;
+
+		border-radius: 1rem 1rem 0 0;
+		height: 90vh;
+		width: calc(100vw - 1rem);
+		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;
+
+			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;
+	}
+}