@acusti/css-value-input 1.0.0-rc.13 → 1.0.0-rc.15

package/dist/CSSValueInput.d.ts

@@ -39,7 +39,5 @@ export type Props = {
     validator?: RegExp | ((value: string) => boolean);
     value?: string;
 };
-declare const _default: React.ForwardRefExoticComponent<
-    Props & React.RefAttributes<HTMLInputElement>
->;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/dist/CSSValueInput.js

@@ -1,44 +1,10 @@
-import {
-    DEFAULT_CSS_VALUE_TYPE,
-    DEFAULT_UNIT_BY_CSS_VALUE_TYPE,
-    getCSSValueAsNumber,
-    getCSSValueWithUnit,
-    getUnitFromCSSValue,
-    roundToPrecision,
-} from '@acusti/css-values';
+import { DEFAULT_CSS_VALUE_TYPE, DEFAULT_UNIT_BY_CSS_VALUE_TYPE, getCSSValueAsNumber, getCSSValueWithUnit, getUnitFromCSSValue, roundToPrecision, } from '@acusti/css-values';
 import InputText from '@acusti/input-text';
 import clsx from 'clsx';
 import * as React from 'react';
 const { useCallback, useEffect, useImperativeHandle, useRef } = React;
 const ROOT_CLASS_NAME = 'cssvalueinput';
-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,
-) {
+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
@@ -49,203 +15,164 @@ export default React.forwardRef(function CSSValueInput(
     useEffect(() => {
         submittedValueRef.current = value !== null && value !== void 0 ? value : '';
     }, [value]);
-    const handleSubmitValue = useCallback(
-        (event) => {
-            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) => {
-            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);
-            // 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);
-                }
-                if (isValid) {
-                    handleSubmitValue(event);
-                } else {
-                    // If current value isn’t valid, revert to last submitted value
-                    input.value = submittedValueRef.current;
-                }
-                return;
+    const handleSubmitValue = useCallback((event) => {
+        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) => {
+        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);
+        // 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);
             }
-            // 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);
-                }
+            else if (validator) {
+                isValid = validator(currentValue);
             }
-            if (normalizedValueAsNumber !== currentValueAsNumber) {
-                const currentUnit = getUnitFromCSSValue({
-                    cssValueType,
-                    defaultUnit,
-                    value: currentValue,
-                });
-                input.value = normalizedValueAsNumber + currentUnit;
-            } else {
-                input.value = getCSSValueWithUnit({
-                    cssValueType,
-                    defaultUnit,
-                    value: currentValue,
-                });
+            if (isValid) {
+                handleSubmitValue(event);
             }
-            handleSubmitValue(event);
-        },
-        [
-            allowEmpty,
-            cssValueType,
-            getValueAsNumber,
-            handleSubmitValue,
-            max,
-            min,
-            onBlur,
-            unit,
-            validator,
-        ],
-    );
-    const getNextValue = useCallback(
-        ({ currentValue, multiplier = 1, signum = 1 }) => {
-            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;
+            else {
+                // If current value isn’t valid, revert to last submitted value
+                input.value = submittedValueRef.current;
             }
-            let nextValue = currentValueAsNumber + modifier;
-            if (cssValueType === 'integer') {
-                nextValue = Math.floor(nextValue);
-            } else {
-                nextValue = roundToPrecision(nextValue, 5);
+            return;
+        }
+        // Normalize value by applying min/max and integer constraints
+        let normalizedValueAsNumber = currentValueAsNumber;
+        if (isCurrentValueFinite) {
+            if (min != null && currentValueAsNumber < min) {
+                normalizedValueAsNumber = min;
             }
-            if (typeof max === 'number' && Number.isFinite(max)) {
-                nextValue = Math.min(max, nextValue);
+            else if (max != null && currentValueAsNumber > max) {
+                normalizedValueAsNumber = max;
             }
-            if (typeof min === 'number' && Number.isFinite(min)) {
-                nextValue = Math.max(min, nextValue);
+            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) => {
-            var _a, _b;
-            const input = event.currentTarget;
-            inputRef.current = input;
-            if (onKeyDown) onKeyDown(event);
-            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':
-                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 = nextValue;
+            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, }) => {
+        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) => {
+        var _a, _b;
+        const input = event.currentTarget;
+        inputRef.current = input;
+        if (onKeyDown)
+            onKeyDown(event);
+        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':
+            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;
-                default:
-                // No default key handling
-            }
-        },
-        [getNextValue, onKeyDown, placeholder, unit],
-    );
-    const handleKeyUp = useCallback(
-        (event) => {
-            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 React.createElement(
-        'label',
-        { 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,
-            }),
-        ),
-    );
+                event.stopPropagation();
+                event.preventDefault();
+                input.value = nextValue;
+                return;
+            default:
+            // No default key handling
+        }
+    }, [getNextValue, onKeyDown, placeholder, unit]);
+    const handleKeyUp = useCallback((event) => {
+        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 (React.createElement("label", { 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 }))));
 });
-//# sourceMappingURL=CSSValueInput.js.map
+//# sourceMappingURL=CSSValueInput.js.map

package/dist/CSSValueInput.test.js

@@ -4,20 +4,18 @@ 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
+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' }),
-        );
+        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%' }));
+        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%');
@@ -36,13 +34,7 @@ describe('CSSValueInput.tsx', () => {
     });
     it('supports custom props.step for ↑/↓ key handling', async () => {
         const user = userEvent.setup();
-        render(
-            React.createElement(CSSValueInput, {
-                onSubmitValue: noop,
-                step: 0.1,
-                value: '2rem',
-            }),
-        );
+        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');
@@ -61,14 +53,7 @@ describe('CSSValueInput.tsx', () => {
     });
     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: '',
-            }),
-        );
+        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('');
@@ -77,14 +62,7 @@ describe('CSSValueInput.tsx', () => {
     });
     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: '',
-            }),
-        );
+        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('');
@@ -95,14 +73,7 @@ describe('CSSValueInput.tsx', () => {
     });
     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',
-            }),
-        );
+        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');
@@ -117,35 +88,17 @@ describe('CSSValueInput.tsx', () => {
     });
     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',
-            }),
-        );
+        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',
-            }),
-        );
+        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',
-            }),
-        );
+        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
+//# sourceMappingURL=CSSValueInput.test.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/css-value-input",
-    "version": "1.0.0-rc.13",
+    "version": "1.0.0-rc.15",
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/CSSValueInput.js",
@@ -51,7 +51,7 @@
     },
     "dependencies": {
         "@acusti/css-values": "^1.0.2",
-        "@acusti/input-text": "^1.5.3",
+        "@acusti/input-text": "^1.6.1",
         "clsx": "^2"
     },
     "peerDependencies": {