feat(ui5-step-input): add thousands separator & scrolling

packages/localization/src/NumberFormat.ts

@@ -0,0 +1,8 @@
+import type NumberFormatT from "sap/ui/core/format/NumberFormat";
+// @ts-ignore
+import NumberFormatNative from "./sap/ui/core/format/NumberFormat.js";
+
+const NumberFormatWrapped = NumberFormatNative as typeof NumberFormatT;
+class NumberFormat extends NumberFormatWrapped {}
+
+export default NumberFormat;

packages/localization/used-modules.txt

@@ -48,4 +48,5 @@ sap/ui/core/date/Persian.js
 sap/ui/core/date/UI5Date.js
 sap/ui/core/date/UniversalDate.js
 sap/ui/core/format/TimezoneUtil.js
-sap/ui/core/format/DateFormat.js
+sap/ui/core/format/DateFormat.js
+sap/ui/core/format/NumberFormat.js

packages/main/cypress/specs/StepInput.cy.tsx

@@ -622,6 +622,36 @@ describe("StepInput events", () => {
 	});
 });
 
+describe("StepInput thousand separator formatting", () => {
+    it("should display value with thousand separator", () => {
+        cy.mount(
+			<StepInput value={12345}></StepInput>
+		);
+
+        cy.get("[ui5-step-input]")
+			.ui5StepInputGetInnerInput()
+			.should($input => {
+            	const val = $input.val();
+            	// Accepts both comma and dot as separator depending on locale
+            	expect(val).to.match(/12[,.]345/);
+        });
+    });
+
+    it("should parse formatted value correctly", () => {
+        cy.mount(
+			<StepInput value={12345}></StepInput>
+		);
+
+		cy.get("[ui5-step-input]")
+			.ui5StepInputGetInnerInput()
+			.should($input => {
+            	const val = $input.val() as string;
+				const num = Number(val.replace(/[^\d]/g, ""));
+            	expect(num).to.equal(12345);
+        });
+    });
+});
+
 describe("StepInput property propagation", () => {
 	it("should propagate 'placeholder' property to inner input", () => {
 		cy.mount(
@@ -632,31 +662,33 @@ describe("StepInput property propagation", () => {
 			.ui5StepInputCheckInnerInputProperty("placeholder", "Enter number");
 	});
 
-	it("should propagate 'min' property to inner input", () => {
+	it("should not propagate 'min' property to inner input", () => {
 		cy.mount(
 			<StepInput min={0}></StepInput>
 		);
 
+		// min should not be propogated because step input uses input with type="text"
 		cy.get("[ui5-step-input]")
-			.ui5StepInputCheckInnerInputProperty("min", "0");
+			.ui5StepInputCheckInnerInputProperty("min", "0", false);
 	});
 
-	it("should propagate 'max' property to inner input", () => {
+	it("should not propagate 'max' property to inner input", () => {
 		cy.mount(
 			<StepInput max={10}></StepInput>
 		);
 
+		// min should not be propogated because step input uses input with type="text"
 		cy.get("[ui5-step-input]")
-			.ui5StepInputCheckInnerInputProperty("max", "10");
+			.ui5StepInputCheckInnerInputProperty("max", "10", false);
 	});
 
-	it("should propagate 'step' property to inner input", () => {
+	it("should not propagate 'step' property to inner input", () => {
 		cy.mount(
 			<StepInput step={2}></StepInput>
 		);
 
 		cy.get("[ui5-step-input]")
-			.ui5StepInputCheckInnerInputProperty("step", "2");
+			.ui5StepInputCheckInnerInputProperty("step", "2", false);
 	});
 
 	it("should propagate 'disabled' property to inner input", () => {
@@ -685,6 +717,42 @@ describe("StepInput property propagation", () => {
 		cy.get("[ui5-step-input]")
 			.ui5StepInputCheckInnerInputProperty("value", "5");
 	});
+
+	it("should increase value on mouse wheel up", () => {
+        cy.mount(
+			<StepInput value={5} step={2}></StepInput>
+		);
+
+        cy.get("[ui5-step-input]")
+			.as("stepInput");
+
+        cy.get<StepInput>("@stepInput")
+			.ui5StepInputScrollToChangeValue(7, false);
+    });
+
+    it("should decrease value on mouse wheel down", () => {
+        cy.mount(
+			<StepInput value={5} step={2}></StepInput>
+		);
+
+        cy.get("[ui5-step-input]")
+			.as("stepInput");
+
+         cy.get<StepInput>("@stepInput")
+			.ui5StepInputScrollToChangeValue(3, true);
+    });
+
+    it("should not change value when readonly", () => {
+        cy.mount(
+			<StepInput value={5} step={2} readonly={true}></StepInput>
+		);
+
+        cy.get("[ui5-step-input]")
+			.as("stepInput");
+
+        cy.get<StepInput>("@stepInput")
+			.ui5StepInputScrollToChangeValue(5, true);
+    });
 });
 
 describe("Validation inside form", () => {

packages/main/cypress/support/commands/StepInput.commands.ts

@@ -44,7 +44,7 @@ Cypress.Commands.add("ui5StepInputAttachHandler", { prevSubject: true },  (subje
 		});
 });
 
-Cypress.Commands.add("ui5StepInputCheckInnerInputProperty", { prevSubject: true }, (subject, propName: string, expectedValue: any) => {
+Cypress.Commands.add("ui5StepInputGetInnerInput", { prevSubject: true }, (subject) => {
 	cy.wrap(subject)
 		 .as("stepInput")
 		.should("be.visible");
@@ -56,8 +56,16 @@ Cypress.Commands.add("ui5StepInputCheckInnerInputProperty", { prevSubject: true
 		.find("input")
 		.as("innerInput");
 
-	cy.get("@innerInput")
-		.should("have.prop", propName, expectedValue);
+	return cy.get("@innerInput");
+});
+
+Cypress.Commands.add("ui5StepInputCheckInnerInputProperty", { prevSubject: true }, (subject, propName: string, expectedValue: any, shouldBePropagated: boolean = true) => {
+	cy.get(subject)
+        .ui5StepInputGetInnerInput()
+        .then($innerInput => {
+            const condition = shouldBePropagated ? "have.prop" : "not.have.prop";
+            cy.wrap($innerInput).should(condition, propName, expectedValue);
+        });
 });
 
 Cypress.Commands.add("ui5StepInputTypeNumber", { prevSubject: true }, (subject, value: number) => {
@@ -75,14 +83,45 @@ Cypress.Commands.add("ui5StepInputTypeNumber", { prevSubject: true }, (subject,
 		.realPress("Enter");
 });
 
+Cypress.Commands.add("ui5StepInputScrollToChangeValue", { prevSubject: true }, (subject, expectedValue: number, decreaseValue: boolean) => {
+	const deltaY = decreaseValue ? 100 : -100;
+
+	cy.wrap(subject)
+		.as("stepInput")
+		.should("be.visible");
+
+	cy.get("@stepInput")
+		.realClick();
+
+	cy.get("@stepInput")
+		.should("be.focused");
+
+	cy.get("@stepInput")
+		.shadow()
+		.find(".ui5-step-input-root")
+		.then($el => {
+			const wheelEvent = new WheelEvent("wheel", { deltaY, bubbles: true, cancelable: true });
+			$el[0].dispatchEvent(wheelEvent);
+		});
+
+	cy.realPress("Tab"); // To trigger change event
+
+	cy.get("@stepInput")
+		.should("have.prop", "value", expectedValue);
+});
+
+
+
 declare global {
 	namespace Cypress {
 		interface Chainable {
 			ui5StepInputChangeValueWithArrowKeys(expectedValue: number, decreaseValue?: boolean): Chainable<void>
 			ui5StepInputChangeValueWithButtons(expectedValue: number, decreaseValue?: boolean): Chainable<void>
 			ui5StepInputAttachHandler(eventName: string, stubName: string): Chainable<void>
-			ui5StepInputCheckInnerInputProperty(propName: string, expectedValue: any): Chainable<void>
+			ui5StepInputGetInnerInput(): Chainable<JQuery<HTMLElement>>
+			ui5StepInputCheckInnerInputProperty(propName: string, expectedValue: any, shouldBePropagated?: boolean): Chainable<void>
 			ui5StepInputTypeNumber(value: number): Chainable<void>
+			ui5StepInputScrollToChangeValue(expectedValue: number, decreaseValue: boolean): Chainable<void>
 		}
 	}
 }