npm - @acusti/css-value-input - Versions diffs - 1.0.0-rc.4 → 1.0.0-rc.6 - Mend

@acusti/css-value-input 1.0.0-rc.4 → 1.0.0-rc.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/CSSValueInput.d.ts +3 -3
package/dist/CSSValueInput.js +19 -16
package/dist/CSSValueInput.js.flow +3 -3
package/dist/CSSValueInput.js.map +1 -1
package/dist/CSSValueInput.test.d.ts +1 -0
package/dist/CSSValueInput.test.js +104 -0
package/dist/CSSValueInput.test.js.flow +6 -0
package/dist/CSSValueInput.test.js.map +1 -0
package/package.json +7 -6
package/src/CSSValueInput.test.tsx +28 -28
package/src/CSSValueInput.tsx +241 -248

package/dist/CSSValueInput.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import type { CSSValueType } from '@acusti/css-values';
+import * as React from 'react';
 export type Props = {
     /** Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true */
     allowEmpty?: boolean;
@@ -27,5 +27,5 @@ export type Props = {
     validator?: RegExp | ((value: string) => boolean);
     value?: string;
 };
-declare const CSSValueInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
-export default CSSValueInput;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/dist/CSSValueInput.js CHANGED Viewed

@@ -4,16 +4,16 @@ import clsx from 'clsx';
 import * as React from 'react';
 const { useCallback, useEffect, useImperativeHandle, useRef } = React;
 const ROOT_CLASS_NAME = 'cssvalueinput';
-const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValueType = DEFAULT_CSS_VALUE_TYPE, disabled, getValueAsNumber = getCSSValueAsNumber, icon, label, max, min, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onSubmitValue, placeholder, step = 1, tabIndex, title, unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType], validator, value, }, ref) => {
+export default React.forwardRef(function CSSValueInput({ allowEmpty = true, className, cssValueType = DEFAULT_CSS_VALUE_TYPE, disabled, getValueAsNumber = getCSSValueAsNumber, icon, label, max, min, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onSubmitValue, placeholder, step = 1, tabIndex, title, unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType], validator, value, }, ref) {
     const inputRef = useRef(null);
     useImperativeHandle(ref, () => inputRef.current);
     // props.value should be a string; if it’s a number, convert it here
     if (typeof value === 'number' && !Number.isNaN(value)) {
-        value = `${value}`;
+        value = `${value}`; // eslint-disable-line @typescript-eslint/restrict-template-expressions
     }
-    const submittedValueRef = useRef(value || '');
+    const submittedValueRef = useRef(value !== null && value !== void 0 ? value : '');
     useEffect(() => {
-        submittedValueRef.current = value || '';
+        submittedValueRef.current = value !== null && value !== void 0 ? value : '';
     }, [value]);
     const handleSubmitValue = useCallback((event) => {
         const currentValue = event.currentTarget.value;
@@ -34,11 +34,15 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
         }
         const currentValueAsNumber = getValueAsNumber(currentValue);
         const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
-        const defaultUnit = getUnitFromCSSValue({
-            cssValueType,
-            defaultUnit: unit,
-            value: submittedValueRef.current,
-        });
+        // Inherit unit from last submitted value unless default is unitless;
+        // ensures that submitting a new value with no unit doesn’t add a unit
+        const defaultUnit = unit
+            ? getUnitFromCSSValue({
+                cssValueType,
+                defaultUnit: unit,
+                value: submittedValueRef.current,
+            })
+            : '';
         if (!isCurrentValueFinite) {
             let isValid = false;
             if (validator instanceof RegExp) {
@@ -100,8 +104,7 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
         const modifier = multiplier * step * signum;
         const currentValueAsNumber = getValueAsNumber(currentValue);
         // If currentValue isn’t numeric, don’t try to increment/decrement it
-        if (typeof currentValue === 'string' &&
-            Number.isNaN(currentValueAsNumber)) {
+        if (typeof currentValue === 'string' && Number.isNaN(currentValueAsNumber)) {
             return currentValue;
         }
         let nextValue = currentValueAsNumber + modifier;
@@ -125,11 +128,12 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
         return `${nextValue}${nextUnit}`;
     }, [cssValueType, getValueAsNumber, max, min, step, unit]);
     const handleKeyDown = useCallback((event) => {
+        var _a, _b;
         const input = event.currentTarget;
         inputRef.current = input;
         if (onKeyDown)
             onKeyDown(event);
-        const currentValue = input.value || placeholder || `0${unit}`;
+        const currentValue = (_b = (_a = input.value) !== null && _a !== void 0 ? _a : placeholder) !== null && _b !== void 0 ? _b : `0${unit}`;
         let nextValue = '';
         switch (event.key) {
             case 'Escape':
@@ -165,11 +169,10 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
         }
     }, [handleSubmitValue, onKeyUp]);
     return (React.createElement("label", { className: clsx(ROOT_CLASS_NAME, className, { disabled }), title: title },
-        icon && React.createElement("div", { className: `${ROOT_CLASS_NAME}-icon` }, icon),
-        label && (React.createElement("div", { className: `${ROOT_CLASS_NAME}-label` },
-            React.createElement("p", { className: `${ROOT_CLASS_NAME}-label-text` }, label))),
+        icon ? React.createElement("div", { className: `${ROOT_CLASS_NAME}-icon` }, icon) : null,
+        label ? (React.createElement("div", { className: `${ROOT_CLASS_NAME}-label` },
+            React.createElement("p", { className: `${ROOT_CLASS_NAME}-label-text` }, label))) : null,
         React.createElement("div", { className: `${ROOT_CLASS_NAME}-value` },
             React.createElement(InputText, { disabled: disabled, initialValue: value, name: name, onBlur: handleBlur, onChange: onChange, onFocus: onFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, placeholder: placeholder, ref: inputRef, selectTextOnFocus: true, tabIndex: tabIndex }))));
 });
-export default CSSValueInput;
 //# sourceMappingURL=CSSValueInput.js.map

package/dist/CSSValueInput.js.flow CHANGED Viewed

@@ -5,8 +5,8 @@
  * @flow
  */
-import * as React from "react";
 import type { CSSValueType } from "@acusti/css-values";
+import * as React from "react";
 export type Props = {|
   /**
    * Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true
@@ -39,8 +39,8 @@ export type Props = {|
   validator?: RegExp | ((value: string) => boolean),
   value?: string,
 |};
-declare var CSSValueInput: React.StatelessFunctionalComponent<{|
+declare var _default: React.StatelessFunctionalComponent<{|
   ...Props,
   ...{| ref?: HTMLInputElement |},
 |}>;
-declare export default typeof CSSValueInput;
+declare export default typeof _default;

package/dist/CSSValueInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,EACtB,8BAA8B,EAC9B,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,GACnB,MAAM,oBAAoB,CAAC;~~AAC5B~~,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAkC~~/B,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;AAEtE,MAAM,eAAe,GAAG,eAAe,CAAC;AAExC,~~MAAM~~,~~aAAa,GAAG,~~KAAK,CAAC,UAAU,~~CAClC~~,~~CACI~~,EACI,UAAU,GAAG,IAAI,EACjB,SAAS,EACT,YAAY,GAAG,sBAAsB,EACrC,QAAQ,EACR,gBAAgB,GAAG,mBAAmB,EACtC,IAAI,EACJ,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,aAAa,EACb,WAAW,EACX,IAAI,GAAG,CAAC,EACR,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,8BAA8B,CAAC,YAAY,CAAC,EACnD,SAAS,EACT,KAAK,GACD,EACR,GAAG~~,EACL,EAAE~~;~~IACA~~,MAAM,QAAQ,GAAG,MAAM,CAAW,IAAI,CAAC,CAAC;IACxC,mBAAmB,CAAqB,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrE,oEAAoE;IACpE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;~~QACnD~~,KAAK,GAAG,GAAG,KAAK,EAAE,CAAC;~~KACtB~~;IACD,MAAM,iBAAiB,GAAG,MAAM,CAAS,KAAK,~~IAAI~~,EAAE,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,iBAAiB,CAAC,OAAO,GAAG,KAAK,~~IAAI~~,EAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,KAA6C,EAAE,EAAE;QAC9C,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;QAC/C,mEAAmE;QACnE,iBAAiB,CAAC,OAAO,GAAG,YAAY,CAAC;QACzC,aAAa,CAAC,YAAY,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC1B,CAAC,KAAyC,EAAE,EAAE;QAC1C,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC;QAClC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,IAAI,MAAM;YAAE,MAAM,CAAC,KAAK,CAAC,CAAC;QAE1B,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAExC,wEAAwE;QACxE,IAAI,UAAU,IAAI,CAAC,YAAY,EAAE;~~YAC7B~~,iBAAiB,CAAC,KAAK,CAAC,CAAC;YACzB,OAAO;~~SACV~~;QAED,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAC5D,MAAM,oBAAoB,GAAG,MAAM,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;QACnE,MAAM,WAAW,GAAG,mBAAmB,CAAC;~~YACpC~~,YAAY;~~YACZ~~,WAAW,EAAE,IAAI;~~YACjB~~,KAAK,EAAE,iBAAiB,CAAC,OAAO;~~SACnC~~,CAAC,CAAC;~~QAEH~~,IAAI,CAAC,oBAAoB,EAAE;~~YACvB~~,IAAI,OAAO,GAAG,KAAK,CAAC;YACpB,IAAI,SAAS,YAAY,MAAM,EAAE;~~gBAC7B~~,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;~~aAC1C~~;iBAAM,IAAI,SAAS,EAAE;~~gBAClB~~,OAAO,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;~~aACrC~~;YAED,IAAI,OAAO,EAAE;~~gBACT~~,iBAAiB,CAAC,KAAK,CAAC,CAAC;~~aAC5B~~;iBAAM;~~gBACH~~,+DAA+D;gBAC/D,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC;~~aAC3C~~;YAED,OAAO;~~SACV~~;QAED,8DAA8D;QAC9D,IAAI,uBAAuB,GAAG,oBAAoB,CAAC;QAEnD,IAAI,oBAAoB,EAAE;~~YACtB~~,IAAI,GAAG,IAAI,IAAI,IAAI,oBAAoB,GAAG,GAAG,EAAE;~~gBAC3C~~,uBAAuB,GAAG,GAAG,CAAC;~~aACjC~~;iBAAM,IAAI,GAAG,IAAI,IAAI,IAAI,oBAAoB,GAAG,GAAG,EAAE;~~gBAClD~~,uBAAuB,GAAG,GAAG,CAAC;~~aACjC~~;iBAAM,IAAI,YAAY,KAAK,SAAS,EAAE;~~gBACnC~~,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;~~aAC9D~~;~~SACJ~~;QAED,IAAI,uBAAuB,KAAK,oBAAoB,EAAE;~~YAClD~~,MAAM,WAAW,GAAG,mBAAmB,CAAC;gBACpC,YAAY;gBACZ,WAAW;gBACX,KAAK,EAAE,YAAY;aACtB,CAAC,CAAC;YACH,KAAK,CAAC,KAAK,GAAG,uBAAuB,GAAG,WAAW,CAAC;~~SACvD~~;aAAM;~~YACH~~,KAAK,CAAC,KAAK,GAAG,mBAAmB,CAAC;gBAC9B,YAAY;gBACZ,WAAW;gBACX,KAAK,EAAE,YAAY;aACtB,CAAC,CAAC;~~SACN~~;QAED,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,EACD;QACI,UAAU;QACV,YAAY;QACZ,gBAAgB;QAChB,iBAAiB;QACjB,GAAG;QACH,GAAG;QACH,MAAM;QACN,IAAI;QACJ,SAAS;KACZ,CACJ,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,EACG,YAAY,EACZ,UAAU,GAAG,CAAC,EACd,MAAM,GAAG,CAAC,GAKb,EAAE,EAAE;QACD,MAAM,QAAQ,GAAG,UAAU,GAAG,IAAI,GAAG,MAAM,CAAC;QAC5C,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAC5D,qEAAqE;QACrE,~~IACI~~,OAAO,YAAY,KAAK,QAAQ~~;YAChC~~,MAAM,CAAC,KAAK,CAAC,oBAAoB,CAAC,~~EACpC~~;~~YACE~~,OAAO,YAAY,CAAC;~~SACvB~~;QAED,IAAI,SAAS,GAAG,oBAAoB,GAAG,QAAQ,CAAC;QAChD,IAAI,YAAY,KAAK,SAAS,EAAE;~~YAC5B~~,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;~~SACrC~~;aAAM;~~YACH~~,SAAS,GAAG,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;~~SAC9C~~;QAED,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;~~YACjD~~,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;~~SACxC~~;QAED,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;~~YACjD~~,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;~~SACxC~~;QAED,MAAM,QAAQ,GAAG,mBAAmB,CAAC;YACjC,YAAY;YACZ,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,YAAY;SACtB,CAAC,CAAC;QACH,OAAO,GAAG,SAAS,GAAG,QAAQ,EAAE,CAAC;IACrC,CAAC,EACD,CAAC,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,CACzD,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,KAA4C,EAAE,EAAE;QAC7C,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC;QAClC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,IAAI,SAAS;YAAE,SAAS,CAAC,KAAK,CAAC,CAAC;QAEhC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,~~IAAI~~,WAAW,~~IAAI~~,IAAI,IAAI,EAAE,CAAC;QAC9D,IAAI,SAAS,GAAG,EAAE,CAAC;QAEnB,QAAQ,KAAK,CAAC,GAAG,EAAE;~~YACf~~,KAAK,QAAQ,CAAC;YACd,KAAK,OAAO;gBACR,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;~~oBACxB~~,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC;~~iBAC3C~~;gBACD,KAAK,CAAC,IAAI,EAAE,CAAC;gBACb,OAAO;YACX,KAAK,SAAS,CAAC;YACf,KAAK,WAAW;gBACZ,SAAS,GAAG,YAAY,CAAC;oBACrB,YAAY;oBACZ,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;oBACnC,MAAM,EAAE,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBAC3C,CAAC,CAAC;gBAEH,IAAI,SAAS,KAAK,YAAY;oBAAE,OAAO;gBAEvC,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;gBACxB,OAAO;YACX,QAAQ;YACR,0BAA0B;~~SAC7B~~;IACL,CAAC,EACD,CAAC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,CAAC,CAC/C,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAA4C,EAAE,EAAE;QAC7C,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAC5B,oEAAoE;QACpE,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;~~YACtD~~,iBAAiB,CAAC,KAAK,CAAC,CAAC;~~SAC5B~~;IACL,CAAC,EACD,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAC/B,CAAC;IAEF,OAAO,CACH,+~~BACI~~,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,~~EACzD~~,KAAK,EAAE,KAAK;~~QAEX~~,IAAI,~~IAAI~~,6BAAK,SAAS,EAAE,GAAG,eAAe,OAAO,IAAG,IAAI,CAAO;~~QAC/D~~,KAAK,~~IAAI~~,~~CACN~~,6BAAK,SAAS,EAAE,GAAG,eAAe,QAAQ;YACtC,2BAAG,SAAS,EAAE,GAAG,eAAe,aAAa,IAAG,KAAK,CAAK,CACxD,CACT;~~QACD~~,6BAAK,SAAS,EAAE,GAAG,eAAe,QAAQ;YACtC,oBAAC,SAAS,IACN,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,QAAQ,EACb,iBAAiB,QACjB,QAAQ,EAAE,QAAQ,GACpB,CACA,CACF,CACX,CAAC;AACN,CAAC,~~CACJ,~~CAAC~~;AAEF~~,~~eAAe,aAAa,~~CAAC"}
1	+ {"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"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"}

package/dist/CSSValueInput.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/CSSValueInput.test.js ADDED Viewed

@@ -0,0 +1,104 @@
+// @vitest-environment happy-dom
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import { afterEach, describe, expect, it } from 'vitest';
+import CSSValueInput from './CSSValueInput.js';
+const noop = () => { }; // eslint-disable-line @typescript-eslint/no-empty-function
+afterEach(cleanup);
+describe('CSSValueInput.tsx', () => {
+    it('renders a text input with the given props.value', () => {
+        render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: "24px" }));
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox');
+        expect(input.value).toBe('24px');
+    });
+    it('handles ↑/↓ keys to increment/decrement by 1 and ⇧↑/⇧↓ to increment/decrement by 10 (preserving the CSS unit)', async () => {
+        const user = userEvent.setup();
+        render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: "75%" }));
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox');
+        expect(input.value).toBe('75%');
+        await user.type(input, '{ArrowUp}');
+        expect(input.value).toBe('76%');
+        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
+        expect(input.value).toBe('86%');
+        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
+        expect(input.value).toBe('96%');
+        await user.type(input, '{ArrowUp}');
+        expect(input.value).toBe('97%');
+        await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
+        expect(input.value).toBe('87%');
+        await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
+        expect(input.value).toBe('77%');
+    });
+    it('supports custom props.step for ↑/↓ key handling', async () => {
+        const user = userEvent.setup();
+        render(React.createElement(CSSValueInput, { onSubmitValue: noop, step: 0.1, value: "2rem" }));
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox');
+        expect(input.value).toBe('2rem');
+        await user.type(input, '{ArrowUp}');
+        expect(input.value).toBe('2.1rem');
+        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
+        expect(input.value).toBe('3.1rem');
+        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
+        expect(input.value).toBe('4.1rem');
+        await user.type(input, '{ArrowUp}');
+        expect(input.value).toBe('4.2rem');
+        await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
+        expect(input.value).toBe('3.2rem');
+        await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
+        expect(input.value).toBe('2.2rem');
+    });
+    it('uses props.unit as default unit when unit is missing', async () => {
+        const user = userEvent.setup();
+        render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "px", value: "" }));
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox');
+        expect(input.value).toBe('');
+        await user.type(input, '14{Enter}');
+        expect(input.value).toBe('14px');
+    });
+    it('preserves last entered unit if different from props.unit when unit is missing', async () => {
+        const user = userEvent.setup();
+        render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "px", value: "" }));
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox');
+        expect(input.value).toBe('');
+        await user.type(input, '25vw{Enter}');
+        expect(input.value).toBe('25vw');
+        await user.type(input, '50{Enter}');
+        expect(input.value).toBe('50vw');
+    });
+    it('treats value as numeric if props.unit is an empty string', async () => {
+        const user = userEvent.setup();
+        render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "", value: "100" }));
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox');
+        expect(input.value).toBe('100');
+        await user.type(input, '1{Enter}');
+        expect(input.value).toBe('1');
+        await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
+        expect(input.value).toBe('11');
+        await user.clear(input);
+        expect(input.value).toBe('');
+        await user.type(input, '200{Enter}');
+        expect(input.value).toBe('200');
+    });
+    it('updates default unit as props.unit and props.value changes', async () => {
+        const user = userEvent.setup();
+        const { rerender } = render(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "px", value: "12px" }));
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox');
+        rerender(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "", value: "4" }));
+        expect(input.value).toBe('4');
+        await user.type(input, '25{Enter}');
+        expect(input.value).toBe('25');
+        rerender(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "rad", value: "3rad" }));
+        expect(input.value).toBe('3rad');
+        await user.type(input, '-4.1{Enter}');
+        expect(input.value).toBe('-4.1rad');
+    });
+});
+//# sourceMappingURL=CSSValueInput.test.js.map

package/dist/CSSValueInput.test.js.flow ADDED Viewed

@@ -0,0 +1,6 @@
+/**
+ * Flowtype definitions for CSSValueInput.test
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.20.1
+ * @flow
+ */

package/dist/CSSValueInput.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CSSValueInput.test.js","sourceRoot":"","sources":["../src/CSSValueInput.test.tsx"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/css-value-input",
-    "version": "1.0.0-rc.4",
+    "version": "1.0.0-rc.6",
     "description": "React component that renders a text input that can take and update a CSS value of a particular type with a default unit",
     "keywords": [
         "react",
@@ -39,15 +39,16 @@
         "@testing-library/dom": "^9.3.1",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/react": "^18.0.25",
-        "jsdom": "^22.1.0",
+        "@types/react": "^18.2.45",
+        "happy-dom": "^12.10.3",
         "react": "^18",
         "react-dom": "^18",
-        "typescript": "^5.1.6"
+        "typescript": "^5.3.3",
+        "vitest": "^1.1.0"
     },
     "dependencies": {
-        "@acusti/css-values": "^1.0.0",
-        "@acusti/input-text": "^1.2.1",
+        "@acusti/css-values": "^1.0.1",
+        "@acusti/input-text": "^1.3.0",
         "clsx": "^2"
     },
     "peerDependencies": {

package/src/CSSValueInput.test.tsx CHANGED Viewed

@@ -1,25 +1,28 @@
-// @vitest-environment jsdom
-import { cleanup, render } from '@testing-library/react';
+// @vitest-environment happy-dom
+import { cleanup, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import React from 'react'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import { afterEach, describe, expect, it } from 'vitest';
 import CSSValueInput from './CSSValueInput.js';
-const noop = () => {};
+const noop = () => {}; // eslint-disable-line @typescript-eslint/no-empty-function
 afterEach(cleanup);
-describe('CSSValueInput.tsx', async () => {
-    it('renders a text input with the given props.value', async () => {
-        const { getByRole } = render(<CSSValueInput onSubmitValue={noop} value="24px" />);
-        expect(getByRole('textbox').value).toBe('24px');
+describe('CSSValueInput.tsx', () => {
+    it('renders a text input with the given props.value', () => {
+        render(<CSSValueInput onSubmitValue={noop} value="24px" />);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox') as HTMLInputElement;
+        expect(input.value).toBe('24px');
     });
     it('handles ↑/↓ keys to increment/decrement by 1 and ⇧↑/⇧↓ to increment/decrement by 10 (preserving the CSS unit)', async () => {
         const user = userEvent.setup();
-        const { getByRole } = render(<CSSValueInput onSubmitValue={noop} value="75%" />);
-        const input = getByRole('textbox');
+        render(<CSSValueInput onSubmitValue={noop} value="75%" />);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox') as HTMLInputElement;
         expect(input.value).toBe('75%');
         await user.type(input, '{ArrowUp}');
         expect(input.value).toBe('76%');
@@ -37,10 +40,9 @@ describe('CSSValueInput.tsx', async () => {
     it('supports custom props.step for ↑/↓ key handling', async () => {
         const user = userEvent.setup();
-        const { getByRole } = render(
-            <CSSValueInput onSubmitValue={noop} step={0.1} value="2rem" />,
-        );
-        const input = getByRole('textbox');
+        render(<CSSValueInput onSubmitValue={noop} step={0.1} value="2rem" />);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox') as HTMLInputElement;
         expect(input.value).toBe('2rem');
         await user.type(input, '{ArrowUp}');
         expect(input.value).toBe('2.1rem');
@@ -58,10 +60,9 @@ describe('CSSValueInput.tsx', async () => {
     it('uses props.unit as default unit when unit is missing', async () => {
         const user = userEvent.setup();
-        const { getByRole } = render(
-            <CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />,
-        );
-        const input = getByRole('textbox');
+        render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox') as HTMLInputElement;
         expect(input.value).toBe('');
         await user.type(input, '14{Enter}');
         expect(input.value).toBe('14px');
@@ -69,10 +70,9 @@ describe('CSSValueInput.tsx', async () => {
     it('preserves last entered unit if different from props.unit when unit is missing', async () => {
         const user = userEvent.setup();
-        const { getByRole } = render(
-            <CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />,
-        );
-        const input = getByRole('textbox');
+        render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox') as HTMLInputElement;
         expect(input.value).toBe('');
         await user.type(input, '25vw{Enter}');
         expect(input.value).toBe('25vw');
@@ -82,10 +82,9 @@ describe('CSSValueInput.tsx', async () => {
     it('treats value as numeric if props.unit is an empty string', async () => {
         const user = userEvent.setup();
-        const { getByRole } = render(
-            <CSSValueInput allowEmpty onSubmitValue={noop} unit="" value="100" />,
-        );
-        const input = getByRole('textbox');
+        render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="" value="100" />);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox') as HTMLInputElement;
         expect(input.value).toBe('100');
         await user.type(input, '1{Enter}');
         expect(input.value).toBe('1');
@@ -99,10 +98,11 @@ describe('CSSValueInput.tsx', async () => {
     it('updates default unit as props.unit and props.value changes', async () => {
         const user = userEvent.setup();
-        const { getByRole, rerender } = render(
+        const { rerender } = render(
             <CSSValueInput onSubmitValue={noop} unit="px" value="12px" />,
         );
-        const input = getByRole('textbox');
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const input = screen.getByRole('textbox') as HTMLInputElement;
         rerender(<CSSValueInput onSubmitValue={noop} unit="" value="4" />);
         expect(input.value).toBe('4');
         await user.type(input, '25{Enter}');

package/src/CSSValueInput.tsx CHANGED Viewed

@@ -6,12 +6,11 @@ import {
     getUnitFromCSSValue,
     roundToPrecision,
 } from '@acusti/css-values';
+import type { CSSValueType } from '@acusti/css-values';
 import InputText from '@acusti/input-text';
 import clsx from 'clsx';
 import * as React from 'react';
-import type { CSSValueType } from '@acusti/css-values';
 export type Props = {
     /** Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true */
     allowEmpty?: boolean;
@@ -46,265 +45,259 @@ const { useCallback, useEffect, useImperativeHandle, useRef } = React;
 const ROOT_CLASS_NAME = 'cssvalueinput';
-const CSSValueInput = React.forwardRef<HTMLInputElement, Props>(
-    (
-        {
-            allowEmpty = true,
-            className,
-            cssValueType = DEFAULT_CSS_VALUE_TYPE,
-            disabled,
-            getValueAsNumber = getCSSValueAsNumber,
-            icon,
-            label,
-            max,
-            min,
-            name,
-            onBlur,
-            onChange,
-            onFocus,
-            onKeyDown,
-            onKeyUp,
-            onSubmitValue,
-            placeholder,
-            step = 1,
-            tabIndex,
-            title,
-            unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType],
-            validator,
-            value,
-        }: Props,
-        ref,
-    ) => {
-        const inputRef = useRef<InputRef>(null);
-        useImperativeHandle<InputRef, InputRef>(ref, () => inputRef.current);
-        // props.value should be a string; if it’s a number, convert it here
-        if (typeof value === 'number' && !Number.isNaN(value)) {
-            value = `${value}`;
-        }
-        const submittedValueRef = useRef<string>(value || '');
-        useEffect(() => {
-            submittedValueRef.current = value || '';
-        }, [value]);
-        const handleSubmitValue = useCallback(
-            (event: React.SyntheticEvent<HTMLInputElement>) => {
-                const currentValue = event.currentTarget.value;
-                // Store last submittedValue (used to reset value on invalid input)
-                submittedValueRef.current = currentValue;
-                onSubmitValue(currentValue);
-            },
-            [onSubmitValue],
-        );
-        const handleBlur = useCallback(
-            (event: React.FocusEvent<HTMLInputElement>) => {
-                const input = event.currentTarget;
-                inputRef.current = input;
-                if (onBlur) onBlur(event);
-                const currentValue = input.value.trim();
-                // If allowEmpty and value is empty, skip all validation + normalization
-                if (allowEmpty && !currentValue) {
-                    handleSubmitValue(event);
-                    return;
-                }
-                const currentValueAsNumber = getValueAsNumber(currentValue);
-                const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
-                const defaultUnit = getUnitFromCSSValue({
-                    cssValueType,
-                    defaultUnit: unit,
-                    value: submittedValueRef.current,
-                });
-                if (!isCurrentValueFinite) {
-                    let isValid = false;
-                    if (validator instanceof RegExp) {
-                        isValid = validator.test(currentValue);
-                    } else if (validator) {
-                        isValid = validator(currentValue);
-                    }
-                    if (isValid) {
-                        handleSubmitValue(event);
-                    } else {
-                        // If current value isn’t valid, revert to last submitted value
-                        input.value = submittedValueRef.current;
-                    }
-                    return;
-                }
-                // Normalize value by applying min/max and integer constraints
-                let normalizedValueAsNumber = currentValueAsNumber;
-                if (isCurrentValueFinite) {
-                    if (min != null && currentValueAsNumber < min) {
-                        normalizedValueAsNumber = min;
-                    } else if (max != null && currentValueAsNumber > max) {
-                        normalizedValueAsNumber = max;
-                    } else if (cssValueType === 'integer') {
-                        normalizedValueAsNumber = Math.floor(currentValueAsNumber);
-                    }
-                }
-                if (normalizedValueAsNumber !== currentValueAsNumber) {
-                    const currentUnit = getUnitFromCSSValue({
-                        cssValueType,
-                        defaultUnit,
-                        value: currentValue,
-                    });
-                    input.value = normalizedValueAsNumber + currentUnit;
-                } else {
-                    input.value = getCSSValueWithUnit({
-                        cssValueType,
-                        defaultUnit,
-                        value: currentValue,
-                    });
-                }
+export default React.forwardRef<HTMLInputElement, Props>(function CSSValueInput(
+    {
+        allowEmpty = true,
+        className,
+        cssValueType = DEFAULT_CSS_VALUE_TYPE,
+        disabled,
+        getValueAsNumber = getCSSValueAsNumber,
+        icon,
+        label,
+        max,
+        min,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        onKeyDown,
+        onKeyUp,
+        onSubmitValue,
+        placeholder,
+        step = 1,
+        tabIndex,
+        title,
+        unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType],
+        validator,
+        value,
+    }: Props,
+    ref,
+) {
+    const inputRef = useRef<InputRef>(null);
+    useImperativeHandle<InputRef, InputRef>(ref, () => inputRef.current);
+    // props.value should be a string; if it’s a number, convert it here
+    if (typeof value === 'number' && !Number.isNaN(value)) {
+        value = `${value}`; // eslint-disable-line @typescript-eslint/restrict-template-expressions
+    }
+    const submittedValueRef = useRef<string>(value ?? '');
+    useEffect(() => {
+        submittedValueRef.current = value ?? '';
+    }, [value]);
+    const handleSubmitValue = useCallback(
+        (event: React.SyntheticEvent<HTMLInputElement>) => {
+            const currentValue = event.currentTarget.value;
+            // Store last submittedValue (used to reset value on invalid input)
+            submittedValueRef.current = currentValue;
+            onSubmitValue(currentValue);
+        },
+        [onSubmitValue],
+    );
+    const handleBlur = useCallback(
+        (event: React.FocusEvent<HTMLInputElement>) => {
+            const input = event.currentTarget;
+            inputRef.current = input;
+            if (onBlur) onBlur(event);
+            const currentValue = input.value.trim();
+            // If allowEmpty and value is empty, skip all validation + normalization
+            if (allowEmpty && !currentValue) {
                 handleSubmitValue(event);
-            },
-            [
-                allowEmpty,
-                cssValueType,
-                getValueAsNumber,
-                handleSubmitValue,
-                max,
-                min,
-                onBlur,
-                unit,
-                validator,
-            ],
-        );
-        const getNextValue = useCallback(
-            ({
-                currentValue,
-                multiplier = 1,
-                signum = 1,
-            }: {
-                currentValue: string | number;
-                multiplier?: number;
-                signum?: number;
-            }) => {
-                const modifier = multiplier * step * signum;
-                const currentValueAsNumber = getValueAsNumber(currentValue);
-                // If currentValue isn’t numeric, don’t try to increment/decrement it
-                if (
-                    typeof currentValue === 'string' &&
-                    Number.isNaN(currentValueAsNumber)
-                ) {
-                    return currentValue;
+                return;
+            }
+            const currentValueAsNumber = getValueAsNumber(currentValue);
+            const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
+            // Inherit unit from last submitted value unless default is unitless;
+            // ensures that submitting a new value with no unit doesn’t add a unit
+            const defaultUnit = unit
+                ? getUnitFromCSSValue({
+                      cssValueType,
+                      defaultUnit: unit,
+                      value: submittedValueRef.current,
+                  })
+                : '';
+            if (!isCurrentValueFinite) {
+                let isValid = false;
+                if (validator instanceof RegExp) {
+                    isValid = validator.test(currentValue);
+                } else if (validator) {
+                    isValid = validator(currentValue);
                 }
-                let nextValue = currentValueAsNumber + modifier;
-                if (cssValueType === 'integer') {
-                    nextValue = Math.floor(nextValue);
+                if (isValid) {
+                    handleSubmitValue(event);
                 } else {
-                    nextValue = roundToPrecision(nextValue, 5);
+                    // If current value isn’t valid, revert to last submitted value
+                    input.value = submittedValueRef.current;
                 }
-                if (typeof max === 'number' && Number.isFinite(max)) {
-                    nextValue = Math.min(max, nextValue);
-                }
+                return;
+            }
-                if (typeof min === 'number' && Number.isFinite(min)) {
-                    nextValue = Math.max(min, nextValue);
+            // Normalize value by applying min/max and integer constraints
+            let normalizedValueAsNumber = currentValueAsNumber;
+            if (isCurrentValueFinite) {
+                if (min != null && currentValueAsNumber < min) {
+                    normalizedValueAsNumber = min;
+                } else if (max != null && currentValueAsNumber > max) {
+                    normalizedValueAsNumber = max;
+                } else if (cssValueType === 'integer') {
+                    normalizedValueAsNumber = Math.floor(currentValueAsNumber);
                 }
+            }
-                const nextUnit = getUnitFromCSSValue({
+            if (normalizedValueAsNumber !== currentValueAsNumber) {
+                const currentUnit = getUnitFromCSSValue({
                     cssValueType,
-                    defaultUnit: unit,
+                    defaultUnit,
                     value: currentValue,
                 });
-                return `${nextValue}${nextUnit}`;
-            },
-            [cssValueType, getValueAsNumber, max, min, step, unit],
-        );
-        const handleKeyDown = useCallback(
-            (event: React.KeyboardEvent<HTMLInputElement>) => {
-                const input = event.currentTarget;
-                inputRef.current = input;
-                if (onKeyDown) onKeyDown(event);
-                const currentValue = input.value || placeholder || `0${unit}`;
-                let nextValue = '';
-                switch (event.key) {
-                    case 'Escape':
-                    case 'Enter':
-                        if (event.key === 'Escape') {
-                            input.value = submittedValueRef.current;
-                        }
-                        input.blur();
-                        return;
-                    case 'ArrowUp':
-                    case 'ArrowDown':
-                        nextValue = getNextValue({
-                            currentValue,
-                            multiplier: event.shiftKey ? 10 : 1,
-                            signum: event.key === 'ArrowUp' ? 1 : -1,
-                        });
-                        if (nextValue === currentValue) return;
-                        event.stopPropagation();
-                        event.preventDefault();
+                input.value = normalizedValueAsNumber + currentUnit;
+            } else {
+                input.value = getCSSValueWithUnit({
+                    cssValueType,
+                    defaultUnit,
+                    value: currentValue,
+                });
+            }
+            handleSubmitValue(event);
+        },
+        [
+            allowEmpty,
+            cssValueType,
+            getValueAsNumber,
+            handleSubmitValue,
+            max,
+            min,
+            onBlur,
+            unit,
+            validator,
+        ],
+    );
+    const getNextValue = useCallback(
+        ({
+            currentValue,
+            multiplier = 1,
+            signum = 1,
+        }: {
+            currentValue: string | number;
+            multiplier?: number;
+            signum?: number;
+        }) => {
+            const modifier = multiplier * step * signum;
+            const currentValueAsNumber = getValueAsNumber(currentValue);
+            // If currentValue isn’t numeric, don’t try to increment/decrement it
+            if (typeof currentValue === 'string' && Number.isNaN(currentValueAsNumber)) {
+                return currentValue;
+            }
+            let nextValue = currentValueAsNumber + modifier;
+            if (cssValueType === 'integer') {
+                nextValue = Math.floor(nextValue);
+            } else {
+                nextValue = roundToPrecision(nextValue, 5);
+            }
+            if (typeof max === 'number' && Number.isFinite(max)) {
+                nextValue = Math.min(max, nextValue);
+            }
+            if (typeof min === 'number' && Number.isFinite(min)) {
+                nextValue = Math.max(min, nextValue);
+            }
+            const nextUnit = getUnitFromCSSValue({
+                cssValueType,
+                defaultUnit: unit,
+                value: currentValue,
+            });
+            return `${nextValue}${nextUnit}`;
+        },
+        [cssValueType, getValueAsNumber, max, min, step, unit],
+    );
+    const handleKeyDown = useCallback(
+        (event: React.KeyboardEvent<HTMLInputElement>) => {
+            const input = event.currentTarget;
+            inputRef.current = input;
+            if (onKeyDown) onKeyDown(event);
+            const currentValue = input.value ?? placeholder ?? `0${unit}`;
+            let nextValue = '';
+            switch (event.key) {
+                case 'Escape':
+                case 'Enter':
+                    if (event.key === 'Escape') {
+                        input.value = submittedValueRef.current;
+                    }
+                    input.blur();
+                    return;
+                case 'ArrowUp':
+                case 'ArrowDown':
+                    nextValue = getNextValue({
+                        currentValue,
+                        multiplier: event.shiftKey ? 10 : 1,
+                        signum: event.key === 'ArrowUp' ? 1 : -1,
+                    });
-                        input.value = nextValue;
-                        return;
-                    default:
-                    // No default key handling
-                }
-            },
-            [getNextValue, onKeyDown, placeholder, unit],
-        );
+                    if (nextValue === currentValue) return;
-        const handleKeyUp = useCallback(
-            (event: React.KeyboardEvent<HTMLInputElement>) => {
-                if (onKeyUp) onKeyUp(event);
-                // If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
-                if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-                    handleSubmitValue(event);
-                }
-            },
-            [handleSubmitValue, onKeyUp],
-        );
+                    event.stopPropagation();
+                    event.preventDefault();
-        return (
-            <label
-                className={clsx(ROOT_CLASS_NAME, className, { disabled })}
-                title={title}
-            >
-                {icon && <div className={`${ROOT_CLASS_NAME}-icon`}>{icon}</div>}
-                {label && (
-                    <div className={`${ROOT_CLASS_NAME}-label`}>
-                        <p className={`${ROOT_CLASS_NAME}-label-text`}>{label}</p>
-                    </div>
-                )}
-                <div className={`${ROOT_CLASS_NAME}-value`}>
-                    <InputText
-                        disabled={disabled}
-                        initialValue={value}
-                        name={name}
-                        onBlur={handleBlur}
-                        onChange={onChange}
-                        onFocus={onFocus}
-                        onKeyDown={handleKeyDown}
-                        onKeyUp={handleKeyUp}
-                        placeholder={placeholder}
-                        ref={inputRef}
-                        selectTextOnFocus
-                        tabIndex={tabIndex}
-                    />
+                    input.value = nextValue;
+                    return;
+                default:
+                // No default key handling
+            }
+        },
+        [getNextValue, onKeyDown, placeholder, unit],
+    );
+    const handleKeyUp = useCallback(
+        (event: React.KeyboardEvent<HTMLInputElement>) => {
+            if (onKeyUp) onKeyUp(event);
+            // If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
+            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+                handleSubmitValue(event);
+            }
+        },
+        [handleSubmitValue, onKeyUp],
+    );
+    return (
+        <label className={clsx(ROOT_CLASS_NAME, className, { disabled })} title={title}>
+            {icon ? <div className={`${ROOT_CLASS_NAME}-icon`}>{icon}</div> : null}
+            {label ? (
+                <div className={`${ROOT_CLASS_NAME}-label`}>
+                    <p className={`${ROOT_CLASS_NAME}-label-text`}>{label}</p>
                 </div>
-            </label>
-        );
-    },
-);
-export default CSSValueInput;
+            ) : null}
+            <div className={`${ROOT_CLASS_NAME}-value`}>
+                <InputText
+                    disabled={disabled}
+                    initialValue={value}
+                    name={name}
+                    onBlur={handleBlur}
+                    onChange={onChange}
+                    onFocus={onFocus}
+                    onKeyDown={handleKeyDown}
+                    onKeyUp={handleKeyUp}
+                    placeholder={placeholder}
+                    ref={inputRef}
+                    selectTextOnFocus
+                    tabIndex={tabIndex}
+                />
+            </div>
+        </label>
+    );
+});