From 73098299e8ed4fc55e1e1bc640c2ba0c4dc5ba98 Mon Sep 17 00:00:00 2001
From: Valentin Valls <valentin.valls@esrf.fr>
Date: Mon, 5 Jan 2026 19:22:28 +0100
Subject: [PATCH 1/3] Fixed returned element

---
 lib/src/Pointer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/src/Pointer.tsx b/lib/src/Pointer.tsx
index d823878..c69a5c5 100644
--- a/lib/src/Pointer.tsx
+++ b/lib/src/Pointer.tsx
@@ -90,7 +90,7 @@ export function Pointer(props: React.PropsWithChildren<Props>) {
     }, [percentage, angleOffset, angleRange, center, radius, height]);
 
     if (transform === null) {
-        return '<></>';
+        return <></>;
     }
 
     return (

From ac590576931a33a2d3845e4e29d43c1cd75d6dc0 Mon Sep 17 00:00:00 2001
From: Valentin Valls <valentin.valls@esrf.fr>
Date: Mon, 5 Jan 2026 19:59:34 +0100
Subject: [PATCH 2/3] Render Scale even when value is null

---
 lib/src/Scale.tsx                          | 19 +++++-----
 lib/test/Scale.spec.tsx                    | 23 ++++++++++++
 lib/test/__snapshots__/Scale.spec.tsx.snap | 41 ++++++++++++++++++++++
 3 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/lib/src/Scale.tsx b/lib/src/Scale.tsx
index c896547..15d355b 100644
--- a/lib/src/Scale.tsx
+++ b/lib/src/Scale.tsx
@@ -9,6 +9,12 @@ interface RenderProps {
     center: [number, number];
     color?: string;
     className?: string;
+
+    /**
+     * Id of the active tick.
+     *
+     * Can be `-1` if there is no active tick in this state.
+     */
     active: number;
     activeColor?: string;
     activeClassName?: string;
@@ -81,7 +87,7 @@ export interface RenderCustomProps extends RenderProps {
     tickWidth: number;
     tickHeight: number;
     steps: number;
-    percentage: number;
+    percentage: number | null;
 }
 
 function renderCustom({
@@ -92,7 +98,7 @@ function renderCustom({
     tickWidth: number;
     tickHeight: number;
     steps: number;
-    percentage: number;
+    percentage: number | null;
 } & RenderProps) {
     return (_: unknown, i: number) => fn({ ...props, i });
 }
@@ -139,11 +145,9 @@ export function Scale(props: Props) {
     const length = steps + (angleRange === 360 ? 0 : 1);
     const translateX = center[0] - tickWidth / 2;
     const translateY = center[1] - radius;
-    if (percentage === null) {
-        return <></>;
-    }
 
-    const active = Math.round((length - 1) * percentage);
+    const active =
+        percentage === null ? -1 : Math.round((length - 1) * percentage);
 
     function getRenderFn() {
         if (steps === undefined) {
@@ -181,9 +185,6 @@ export function Scale(props: Props) {
             });
         }
         if (fn) {
-            if (percentage === null) {
-                return <></>;
-            }
             return renderCustom({
                 fn,
                 tickWidth,
diff --git a/lib/test/Scale.spec.tsx b/lib/test/Scale.spec.tsx
index 7d2c450..56fb9d9 100644
--- a/lib/test/Scale.spec.tsx
+++ b/lib/test/Scale.spec.tsx
@@ -111,4 +111,27 @@ describe('Scale', () => {
         );
         expect(container.children[0].children[0].children[0]).toMatchSnapshot();
     });
+    it('renders when value is null', () => {
+        const { container } = render(
+            <Knob
+                min={0}
+                max={100}
+                value={null}
+                size={100}
+                angleOffset={90}
+                angleRange={200}
+            >
+                <Scale
+                    type="circle"
+                    steps={3}
+                    radius={40}
+                    tickWidth={2}
+                    tickHeight={10}
+                    className="someClassName"
+                    activeClassName="someActiveClassName"
+                />
+            </Knob>,
+        );
+        expect(container.children[0].children[0].children[0]).toMatchSnapshot();
+    });
 });
diff --git a/lib/test/__snapshots__/Scale.spec.tsx.snap b/lib/test/__snapshots__/Scale.spec.tsx.snap
index 499e2e2..a430e01 100644
--- a/lib/test/__snapshots__/Scale.spec.tsx.snap
+++ b/lib/test/__snapshots__/Scale.spec.tsx.snap
@@ -241,3 +241,44 @@ exports[`Scale > renders correct with custom render function for ticks 1`] = `
   />
 </g>
 `;
+
+exports[`Scale > renders when value is null 1`] = `
+<g>
+  <circle
+    class="someClassName"
+    r="2"
+    stroke="none"
+    transform="
+        rotate(90 50 50) 
+        translate(49 10)
+        "
+  />
+  <circle
+    class="someClassName"
+    r="2"
+    stroke="none"
+    transform="
+        rotate(156.66666666666669 50 50) 
+        translate(49 10)
+        "
+  />
+  <circle
+    class="someClassName"
+    r="2"
+    stroke="none"
+    transform="
+        rotate(223.33333333333334 50 50) 
+        translate(49 10)
+        "
+  />
+  <circle
+    class="someClassName"
+    r="2"
+    stroke="none"
+    transform="
+        rotate(290 50 50) 
+        translate(49 10)
+        "
+  />
+</g>
+`;

From 366ca01b64123dc47f3e08cba771ea1902b5f931 Mon Sep 17 00:00:00 2001
From: Valentin Valls <valentin.valls@esrf.fr>
Date: Mon, 5 Jan 2026 20:00:02 +0100
Subject: [PATCH 3/3] Update changelog

---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8351662..41477c5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Fixed
+
+- Fixed `Pointer`, which was rendering a string in some context, instead of a JSX element
+
+### Changed
+
+- Changed `Scale`, which was skipped when no value was set to the component. Now it is rendered.
+- Changed `RenderCustomProps`type, which is now valid for `percentage=null`
+
 ## 1.3.0 - 2026-01-05
 
 ### Added