@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @olenbetong/appframe-ds
 
+## 1.2.0
+
+### Minor Changes
+
+- 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.
+
+## 1.1.0
+
+### Minor Changes
+
+- 7a3a3fc: The package's strings (grid, filter builder, bindings, lookups, MDI) are looked up in their own globalization project, `appframe-ds`, through `createLocalizer` from appframe-core 2.14, so one translation covers every app instead of one per article. On a page whose template renders `af.i18n["appframe-ds"]` the strings are harvested under that project; on any other page the lookup falls back to the article's strings as before.
+
 ## 1.0.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.0.3",
+  "version": "1.2.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "3.1.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.2.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.2.2",
     "@base-ui/react": "1.8.0",
     "clsx": "^2.1.1",
     "dockview-react": "8.3.1",
@@ -70,19 +70,20 @@
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "react-window": "2.3.1",
+    "temporal-polyfill": "1.0.5",
     "@olenbetong/appframe-core": "2.14.0",
-    "@olenbetong/appframe-react": "2.2.1",
-    "@olenbetong/appframe-data": "1.7.2"
+    "@olenbetong/appframe-data": "1.7.2",
+    "@olenbetong/appframe-react": "2.2.1"
   },
   "devDependencies": {
-    "@digdir/designsystemet-react": "1.21.1",
+    "@digdir/designsystemet-react": "1.22.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "9.4.0",
     "@mui/x-data-grid-premium": "8.29.3",
     "@mui/x-license": "8.29.3",
     "@navikt/aksel-icons": "8.16.2",
-    "@testing-library/dom": "^10.4.1",
+    "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "16.3.3",
     "@testing-library/user-event": "^14.6.7",
@@ -90,7 +91,7 @@
     "@types/react-dom": "19.3.0",
     "happy-dom": "20.14.5",
     "react-error-boundary": "6.1.5",
-    "react-router": "8.3.1",
+    "react-router": "8.4.0",
     "typescript": "7.0.2"
   },
   "scripts": {

package/scripts/copyAssets.mjs

@@ -1,55 +1,27 @@
-import { cpSync, mkdirSync } from "node:fs";
-
-const files = [
-	["src/AfLookup/Lookup.css", "es/AfLookup/Lookup.css"],
-	["src/AfLookup/LookupGrid.css", "es/AfLookup/LookupGrid.css"],
-	["src/AfLookup/LookupCombobox.css", "es/AfLookup/LookupCombobox.css"],
-	["src/layout/AppMenu.css", "es/layout/AppMenu.css"],
-	["src/layout/AppMenuDrawer.css", "es/layout/AppMenuDrawer.css"],
-	["src/layout/AppMenuItem.css", "es/layout/AppMenuItem.css"],
-	["src/layout/AppMenuSubheader.css", "es/layout/AppMenuSubheader.css"],
-	["src/layout/AppLayoutDesktop.css", "es/layout/AppLayoutDesktop.css"],
-	["src/layout/AppLayoutMobile.css", "es/layout/AppLayoutMobile.css"],
-	["src/layout/index.css", "es/layout/index.css"],
-	["src/layout/ErrorBoundary.css", "es/layout/ErrorBoundary.css"],
-	["src/layout/PageContainer.css", "es/layout/PageContainer.css"],
-	["src/page/Page.css", "es/page/Page.css"],
-	["src/page/PageBlock.css", "es/page/PageBlock.css"],
-	["src/page/PageHeader.css", "es/page/PageHeader.css"],
-	["src/list/ItemList.css", "es/list/ItemList.css"],
-	["src/input/InputAdornments.css", "es/input/InputAdornments.css"],
-	["src/paper/Paper.css", "es/paper/Paper.css"],
-	["src/progress/LinearProgress.css", "es/progress/LinearProgress.css"],
-	["src/sortable/DropIndicator.css", "es/sortable/DropIndicator.css"],
-	["src/sortable/SortableItemList.css", "es/sortable/SortableItemList.css"],
-	["src/autocomplete/Autocomplete.css", "es/autocomplete/Autocomplete.css"],
-	["src/filter/FilterBuilder.css", "es/filter/FilterBuilder.css"],
-	["src/filter/FieldFilterPanel.css", "es/filter/FieldFilterPanel.css"],
-	["src/filter/FilterEditor.css", "es/filter/FilterEditor.css"],
-	["src/filter/FilterNameDialog.css", "es/filter/FilterNameDialog.css"],
-	["src/filter/FilterShareDialog.css", "es/filter/FilterShareDialog.css"],
-	["src/filter/SavedFilterTree.css", "es/filter/SavedFilterTree.css"],
-	["src/grid/index.css", "es/grid/index.css"],
-	["src/grid/slots/slots.css", "es/grid/slots/slots.css"],
-	["src/mdi/Mdi.css", "es/mdi/Mdi.css"],
-	["src/report-downloader/ReportDownloader.css", "es/report-downloader/ReportDownloader.css"],
-];
-
-mkdirSync("es/layout", { recursive: true });
-mkdirSync("es/input", { recursive: true });
-mkdirSync("es/list", { recursive: true });
-mkdirSync("es/page", { recursive: true });
-mkdirSync("es/paper", { recursive: true });
-mkdirSync("es/progress", { recursive: true });
-mkdirSync("es/sortable", { recursive: true });
-mkdirSync("es/autocomplete", { recursive: true });
-mkdirSync("es/filter", { recursive: true });
-mkdirSync("es/grid", { recursive: true });
-mkdirSync("es/grid/slots", { recursive: true });
-mkdirSync("es/mdi", { recursive: true });
-mkdirSync("es/report-downloader", { recursive: true });
-
-for (let [src, dest] of files) {
-	cpSync(src, dest);
-	console.log(`Copied ${src} → ${dest}`);
-}
+/*
+ * 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,125 +1,129 @@
-.ObLookup-inputWrap {
-	position: relative;
-
-	.ds-input {
-		padding-inline-end: var(--ObLookup-buttons-width, 3rem);
-	}
-}
-
-.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;
+	}
+}