@acusti/css-value-input 1.0.0-rc.2 → 1.0.0-rc.21

package/README.md

@@ -9,3 +9,64 @@
 take and update a CSS value of a particular type with a default unit. The
 input’s behavior is similar to those of design applications such as Adobe
 Illustrator.
+
+See the [storybook docs and demo][] to get a feel for what it can do.
+
+[storybook docs and demo]:
+    https://acusti-uikit.netlify.app/?path=/docs/uikit-controls-CSSValueInput--docs
+
+## Usage
+
+```
+npm install @acusti/css-value-input
+# or
+yarn add @acusti/css-value-input
+```
+
+### Props
+
+This is the type signature for the props you can pass to `CSSValueInput`.
+The unique features provided by the component are called out and explained
+above the corresponding prop via JSDoc comments:
+
+```ts
+type Props = {
+    /**
+     * Boolean indicating if the user can submit an empty value (i.e. clear
+     * the value). Defaults to true.
+     */
+    allowEmpty?: boolean;
+    className?: string;
+    cssValueType?: CSSValueType;
+    disabled?: boolean;
+    /**
+     * Function that receives a value and converts it to its numerical equivalent
+     * (i.e. '12px' → 12). Defaults to parseFloat().
+     */
+    getValueAsNumber?: (value: string | number) => number;
+    icon?: React.ReactNode;
+    label?: string;
+    max?: number;
+    min?: number;
+    name?: string;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    /**
+     * Custom event handler triggered when the user presses enter/return
+     * or blurs the input after making a change. Hitting esc will restore
+     * the previous submitted value or original value.
+     */
+    onSubmitValue: (value: string) => unknown;
+    placeholder?: string;
+    step?: number;
+    tabIndex?: number;
+    title?: string;
+    unit?: string;
+    /** Regex or validator function to validate non-numeric values */
+    validator?: RegExp | ((value: string) => boolean);
+    value?: string;
+};
+```

package/dist/CSSValueInput.d.ts

@@ -1,11 +1,18 @@
-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 */
+    /**
+     * Boolean indicating if the user can submit an empty value (i.e. clear
+     * the value). Defaults to true.
+     */
     allowEmpty?: boolean;
     className?: string;
     cssValueType?: CSSValueType;
     disabled?: boolean;
+    /**
+     * Function that receives a value and converts it to its numerical equivalent
+     * (i.e. '12px' → 12). Defaults to parseFloat().
+     */
     getValueAsNumber?: (value: string | number) => number;
     icon?: React.ReactNode;
     label?: string;
@@ -17,6 +24,11 @@ export type Props = {
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
     onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    /**
+     * Custom event handler triggered when the user presses enter/return
+     * or blurs the input after making a change. Hitting esc will restore
+     * the previous submitted value or original value.
+     */
     onSubmitValue: (value: string) => unknown;
     placeholder?: string;
     step?: number;
@@ -27,5 +39,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

@@ -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':
@@ -164,12 +168,11 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
             handleSubmitValue(event);
         }
     }, [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))),
+    return (React.createElement("label", { "aria-label": label ? undefined : title, className: clsx(ROOT_CLASS_NAME, className, { disabled }), title: title },
+        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

@@ -5,16 +5,22 @@
  * @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
+   * Boolean indicating if the user can submit an empty value (i.e. clear
+   * the value). Defaults to true.
    */
   allowEmpty?: boolean,
   className?: string,
   cssValueType?: CSSValueType,
   disabled?: boolean,
+
+  /**
+   * Function that receives a value and converts it to its numerical equivalent
+   * (i.e. '12px' → 12). Defaults to parseFloat().
+   */
   getValueAsNumber?: (value: string | number) => number,
   icon?: React.Node,
   label?: string,
@@ -26,6 +32,12 @@ export type Props = {|
   onFocus?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
   onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
   onKeyUp?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+
+  /**
+   * Custom event handler triggered when the user presses enter/return
+   * or blurs the input after making a change. Hitting esc will restore
+   * the previous submitted value or original value.
+   */
   onSubmitValue: (value: string) => mixed,
   placeholder?: string,
   step?: number,
@@ -39,8 +51,8 @@ export type Props = {|
   validator?: RegExp | ((value: string) => boolean),
   value?: string,
 |};
-declare var CSSValueInput: React.ForwardRefExoticComponent<{|
+declare var _default: React.StatelessFunctionalComponent<{|
   ...Props,
-  ...React.RefAttributes<HTMLInputElement>,
+  ...{| ref?: HTMLInputElement |},
 |}>;
-declare export default typeof CSSValueInput;
+declare export default typeof _default;

package/dist/CSSValueInput.js.map

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

package/dist/CSSValueInput.test.d.ts

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

package/dist/CSSValueInput.test.js

@@ -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

@@ -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

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

package/package.json

@@ -1,6 +1,15 @@
 {
     "name": "@acusti/css-value-input",
-    "version": "1.0.0-rc.2",
+    "version": "1.0.0-rc.21",
+    "type": "module",
+    "sideEffects": false,
+    "exports": "./dist/CSSValueInput.js",
+    "main": "./dist/CSSValueInput.js",
+    "types": "./dist/CSSValueInput.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
     "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",
@@ -15,15 +24,9 @@
         "ts",
         "flow"
     ],
-    "type": "module",
-    "sideEffects": false,
-    "exports": "./dist/CSSValueInput.js",
-    "main": "./dist/CSSValueInput.js",
-    "types": "./dist/CSSValueInput.d.ts",
-    "files": [
-        "dist",
-        "src"
-    ],
+    "scripts": {
+        "test": "vitest"
+    },
     "repository": {
         "type": "git",
         "url": "https://github.com/acusti/uikit.git",
@@ -36,22 +39,23 @@
     },
     "homepage": "https://github.com/acusti/uikit/tree/main/packages/css-value-input#readme",
     "devDependencies": {
-        "@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",
-        "react": "^18",
-        "react-dom": "^18",
-        "typescript": "^5.1.6"
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/react": "^16.0.1",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/react": "^18.3.3",
+        "happy-dom": "^15.7.3",
+        "react": "^19.0.0-0",
+        "react-dom": "^19.0.0-0",
+        "typescript": "5.3.3",
+        "vitest": "^1.1.0"
     },
     "dependencies": {
-        "@acusti/css-values": "^1.0.0",
-        "@acusti/input-text": "^1.2.0",
+        "@acusti/css-values": "^1.0.2",
+        "@acusti/input-text": "^1.7.2",
         "clsx": "^2"
     },
     "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18",
-        "react-dom": "^16.8 || ^17 || ^18"
+        "react": "^16.8 || ^17 || ^18 || ^19.0.0-0",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19.0.0-0"
     }
 }

package/src/CSSValueInput.test.tsx

@@ -1,25 +1,28 @@
-// @vitest-environment jsdom
-import { cleanup, render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
+// @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 = () => {};
+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

@@ -6,18 +6,24 @@ 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 */
+    /**
+     * Boolean indicating if the user can submit an empty value (i.e. clear
+     * the value). Defaults to true.
+     */
     allowEmpty?: boolean;
     className?: string;
     cssValueType?: CSSValueType;
     disabled?: boolean;
+    /**
+     * Function that receives a value and converts it to its numerical equivalent
+     * (i.e. '12px' → 12). Defaults to parseFloat().
+     */
     getValueAsNumber?: (value: string | number) => number;
     icon?: React.ReactNode;
     label?: string;
@@ -29,6 +35,11 @@ export type Props = {
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
     onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    /**
+     * Custom event handler triggered when the user presses enter/return
+     * or blurs the input after making a change. Hitting esc will restore
+     * the previous submitted value or original value.
+     */
     onSubmitValue: (value: string) => unknown;
     placeholder?: string;
     step?: number;
@@ -46,265 +57,263 @@ 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
+            aria-label={label ? undefined : title}
+            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>
+    );
+});