@olenbetong/appframe-ds 1.6.0 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olenbetong/appframe-ds
 
+## 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.6.1",
   "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",

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,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;
+	}
+}