@olenbetong/appframe-ds 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @olenbetong/appframe-ds
 
+## 1.0.1
+
+### Patch Changes
+
+- 61855a9: Fix the AfGrid sort-order and filter-count badge: it is now anchored to the header icon button instead of floating beside it (where the column header clipped it), and uses a compact 1rem size.
+- Updated dependencies [986cea3]
+- Updated dependencies [2787329]
+  - @olenbetong/appframe-data@1.7.1
+  - @olenbetong/appframe-react@2.1.4
+
 ## 1.0.0
 
 ### Major Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -35,8 +35,6 @@
     "@mui/x-data-grid-premium": ">=8.0.0 <9.0.0",
     "@mui/x-license": ">=8.0.0 <9.0.0",
     "@navikt/aksel-icons": ">=8.16.1",
-    "react": ">=19.2.8",
-    "react-dom": ">=19.2.8",
     "react-error-boundary": ">=6.1.2",
     "react-router": ">=8.3.0"
   },
@@ -60,16 +58,18 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "2.0.2",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.2.0",
-    "@base-ui/react": "1.7.0",
+    "@base-ui/react": "1.8.0",
     "clsx": "^2.1.1",
-    "dockview-react": "8.2.0",
+    "dockview-react": "8.3.0",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
     "react-virtualized-auto-sizer": "^1.0.26",
     "react-window": "^1.8.11",
+    "@olenbetong/appframe-data": "1.7.1",
     "@olenbetong/appframe-core": "2.13.1",
-    "@olenbetong/appframe-data": "1.7.0",
-    "@olenbetong/appframe-react": "2.1.3"
+    "@olenbetong/appframe-react": "2.1.4"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.21.0",
@@ -78,18 +78,16 @@
     "@mui/material": "9.4.0",
     "@mui/x-data-grid-premium": "8.29.3",
     "@mui/x-license": "8.29.3",
-    "@navikt/aksel-icons": "8.16.1",
+    "@navikt/aksel-icons": "8.16.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "16.3.3",
-    "@testing-library/user-event": "^14.6.6",
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.5",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
     "@types/react-window": "^1.8.8",
-    "happy-dom": "^20.12.0",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
-    "react-error-boundary": "6.1.4",
+    "happy-dom": "^20.14.3",
+    "react-error-boundary": "6.1.5",
     "react-router": "8.3.1",
     "typescript": "7.0.2"
   },

package/src/grid/slots/index.tsx

@@ -237,18 +237,25 @@ function BaseBadge(props: GridSlotProps["baseBadge"]) {
 	let { badgeContent, children, invisible, color, variant, overlap, className, ...other } = props;
 	let count = typeof badgeContent === "number" ? badgeContent : Number(badgeContent);
 
+	// The badge must wrap the element it decorates so Designsystemet anchors it to
+	// that element's corner. Rendering it as a sibling put the badge on an empty
+	// box next to the icon, where it was clipped by the column header.
 	return (
-		<span {...(other as any)} className={clsx("AfGrid-badgeWrapper", className)}>
+		<Badge.Position
+			{...(other as any)}
+			className={clsx("AfGrid-badge", className)}
+			placement="top-right"
+			overlap={overlap === "circular" ? "circle" : "rectangle"}
+		>
 			{children}
 			{!invisible && (
-				<Badge.Position placement="top-right" overlap={overlap === "circular" ? "circle" : "rectangle"}>
-					<Badge
-						count={variant === "dot" || Number.isNaN(count) ? undefined : count}
-						data-color={color === "error" ? "danger" : color === "primary" ? "accent" : "neutral"}
-					/>
-				</Badge.Position>
+				<Badge
+					aria-hidden
+					count={variant === "dot" || Number.isNaN(count) ? undefined : count}
+					data-color={color === "error" ? "danger" : color === "primary" ? "accent" : "neutral"}
+				/>
 			)}
-		</span>
+		</Badge.Position>
 	);
 }
 

package/src/grid/slots/slots.css

@@ -12,9 +12,20 @@
 	width: 100%;
 }
 
-.AfGrid-badgeWrapper {
-	position: relative;
-	display: inline-flex;
+/* Sort-order and filter-count badges on header icon buttons: a compact number
+   pinned to the button corner instead of Designsystemet's default 1.5rem badge. */
+.AfGrid-badge .ds-badge {
+	--dsc-badge-size--count: var(--ds-size-4, 1rem);
+	--dsc-badge-padding: 0 var(--ds-size-1, 0.25rem);
+
+	/* Pull the badge down from the default 14% so its top edge stays inside the
+	   header row instead of being cropped. */
+	--dsc-badge-top: 32%;
+}
+
+.AfGrid-badge .ds-badge::before {
+	font-size: var(--ds-font-size-1, 0.75rem);
+	line-height: 1;
 }
 
 .AfGrid-linearProgress {