chore(ts): upgrade typescript to 5.8.3

api/package.json

@@ -35,7 +35,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "ts-node": "^10.4.0",
-        "typescript": "^4.5.4",
+        "typescript": "^5.8.3",
         "winston": "3.3.3"
     },
     "scripts": {

cypress/package.json

@@ -51,7 +51,7 @@
         "cypress": "^14.3.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "typescript": "^4.9.5",
+        "typescript": "^5.8.3",
         "vite": "^6.3.4"
     },
     "browserslist": {

examples/codesandbox/package.json

@@ -50,7 +50,7 @@
   "devDependencies": {
     "@types/react": "17.0.5",
     "@types/react-dom": "17.0.5",
-    "typescript": "4.2.4"
+    "typescript": "^5.8.3"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -70,7 +70,7 @@
     "rollup-plugin-strip-banner": "^3.0.0",
     "rollup-plugin-visualizer": "^5.5.2",
     "serve": "^13.0.2",
-    "typescript": "^4.9.5",
+    "typescript": "^5.8.3",
     "typescript-eslint": "^8.31.1",
     "wait-on": "^8.0.3",
     "yargs": "^17.7.2"
@@ -99,8 +99,23 @@
     "type": "opencollective",
     "url": "https://opencollective.com/nivo"
   },
-  "packageManager": "pnpm@10.9.0",
+  "packageManager": "pnpm@10.10.0",
   "pnpm": {
-    "onlyBuiltDependencies": ["@parcel/watcher", "@swc/core", "core-js", "core-js-pure", "cypress", "es5-ext", "esbuild", "gatsby", "gatsby-cli", "lmdb", "msgpackr-extract", "nx", "puppeteer", "sharp"]
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "@swc/core",
+      "core-js",
+      "core-js-pure",
+      "cypress",
+      "es5-ext",
+      "esbuild",
+      "gatsby",
+      "gatsby-cli",
+      "lmdb",
+      "msgpackr-extract",
+      "nx",
+      "puppeteer",
+      "sharp"
+    ]
   }
 }

packages/axes/src/canvas.ts

@@ -61,8 +61,9 @@ export const renderAxisToCanvas = <Value extends ScaleValue>(
 
     setCanvasFont(ctx, theme.axis.ticks.text)
 
-    if ((theme.axis.domain.line.strokeWidth ?? 0) > 0) {
-        ctx.lineWidth = Number(theme.axis.domain.line.strokeWidth)
+    const domainLineWidth = theme.axis.domain.line.strokeWidth ?? 0
+    if (typeof domainLineWidth !== 'string' && domainLineWidth > 0) {
+        ctx.lineWidth = domainLineWidth
         ctx.lineCap = 'square'
 
         if (theme.axis.domain.line.stroke) {
@@ -77,9 +78,11 @@ export const renderAxisToCanvas = <Value extends ScaleValue>(
 
     const format = typeof _format === 'function' ? _format : (value: unknown) => `${value}`
 
+    const tickLineWidth = theme.axis.ticks.line.strokeWidth ?? 0
+    const shouldRenderTickLine = typeof tickLineWidth !== 'string' && tickLineWidth > 0
     ticks.forEach(tick => {
-        if ((theme.axis.ticks.line.strokeWidth ?? 0) > 0) {
-            ctx.lineWidth = Number(theme.axis.ticks.line.strokeWidth)
+        if (shouldRenderTickLine) {
+            ctx.lineWidth = tickLineWidth
             ctx.lineCap = 'square'
 
             if (theme.axis.ticks.line.stroke) {

packages/legends/src/canvas.ts

@@ -202,9 +202,11 @@ export const renderContinuousColorLegendToCanvas = (
 
     setCanvasFont(ctx, theme.legends.ticks.text)
 
+    const tickLineWidth = theme.legends.ticks.line.strokeWidth ?? 0
+    const shouldRenderTickLine = typeof tickLineWidth !== 'string' && tickLineWidth > 0
     ticks.forEach(tick => {
-        if ((theme.legends.ticks.line.strokeWidth ?? 0) > 0) {
-            ctx.lineWidth = Number(theme.axis.ticks.line.strokeWidth)
+        if (shouldRenderTickLine) {
+            ctx.lineWidth = tickLineWidth
             if (theme.axis.ticks.line.stroke) {
                 ctx.strokeStyle = theme.axis.ticks.line.stroke
             }

packages/line/src/LineCanvas.tsx

@@ -165,8 +165,9 @@ const InnerLineCanvas = <Series extends LineSeries>({
                 layer(ctx, customLayerProps)
             }
 
-            if (layer === 'grid' && (theme.grid.line.strokeWidth || 0) > 0) {
-                ctx.lineWidth = theme.grid.line.strokeWidth as number
+            const gridLineWidth = theme.grid.line.strokeWidth ?? 0
+            if (layer === 'grid' && typeof gridLineWidth !== 'string' && gridLineWidth > 0) {
+                ctx.lineWidth = gridLineWidth
                 ctx.strokeStyle = theme.grid.line.stroke as string
 
                 if (enableGridX) {

packages/marimekko/src/hooks.ts

@@ -32,7 +32,7 @@ export const useDataDimensions = <RawDatum>(rawDimensions: DataProps<RawDatum>['
             dimensions[dimension.id] =
                 typeof dimension.value === 'function'
                     ? dimension.value
-                    : (datum: RawDatum) => get(datum, dimension.value as string, 0)
+                    : (datum: RawDatum) => get(datum, dimension.value as string, 0) as number
         })
 
         return { dimensionIds, dimensions }