@acusti/css-value-input 0.23.0 → 0.25.0

package/dist/CSSValueInput.js

@@ -1,234 +1,163 @@
-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, 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,
-    ) => {
-        const inputRef = useRef(null);
-        useImperativeHandle(ref, () => inputRef.current);
-        const submittedValueRef = useRef(value || '');
-        const handleSubmitValue = useCallback(() => {
-            if (!inputRef.current) return;
-            const currentValue = inputRef.current.value;
-            // Store last submittedValue (used to reset value on invalid input)
-            submittedValueRef.current = currentValue;
-            onSubmitValue(currentValue);
-        }, [onSubmitValue]);
-        const handleBlur = useCallback(
-            (event) => {
-                if (onBlur) onBlur(event);
-                if (!inputRef.current) return;
-                const currentValue = inputRef.current.value.trim();
-                // If allowEmpty and value is empty, skip all validation + normalization
-                if (allowEmpty && !currentValue) {
-                    handleSubmitValue();
-                    return;
-                }
-                const currentValueAsNumber = getValueAsNumber(currentValue);
-                const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
-                if (!isCurrentValueFinite) {
-                    let isValid = false;
-                    if (validator instanceof RegExp) {
-                        isValid = validator.test(currentValue);
-                    } else if (validator) {
-                        isValid = validator(currentValue);
-                    }
-                    if (isValid) {
-                        handleSubmitValue();
-                    } else {
-                        // If current value isn’t valid, revert to last submitted value
-                        inputRef.current.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: unit,
-                        value: currentValue,
-                    });
-                    inputRef.current.value = normalizedValueAsNumber + currentUnit;
-                } else {
-                    inputRef.current.value = getCSSValueWithUnit({
-                        cssValueType,
-                        defaultUnit: unit,
-                        value: currentValue,
-                    });
-                }
-                handleSubmitValue();
-            },
-            [
-                allowEmpty,
+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) => {
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    const submittedValueRef = useRef(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);
+        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,
-                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);
+                defaultUnit: unit,
+                value: currentValue,
+            });
+            input.value = normalizedValueAsNumber + currentUnit;
+        }
+        else {
+            input.value = getCSSValueWithUnit({
+                cssValueType,
+                defaultUnit: unit,
+                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) => {
+        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;
                 }
-                const nextUnit = getUnitFromCSSValue({
-                    cssValueType,
-                    defaultUnit: unit,
-                    value: currentValue,
+                input.blur();
+                return;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                nextValue = getNextValue({
+                    currentValue,
+                    multiplier: event.shiftKey ? 10 : 1,
+                    signum: event.key === 'ArrowUp' ? 1 : -1,
                 });
-                return `${nextValue}${nextUnit}`;
-            },
-            [cssValueType, getValueAsNumber, max, min, step, unit],
-        );
-        const handleKeyDown = useCallback(
-            (event) => {
-                if (onKeyDown) onKeyDown(event);
-                const input = event.currentTarget;
-                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 = 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();
-                }
-            },
-            [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,
-                    ),
-                ),
-            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,
-                }),
-            ),
-        );
-    },
-);
+                if (nextValue === currentValue)
+                    return;
+                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),
+        label && (React.createElement("div", { className: `${ROOT_CLASS_NAME}-label` },
+            React.createElement("p", { className: `${ROOT_CLASS_NAME}-label-text` }, label))),
+        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
+//# sourceMappingURL=CSSValueInput.js.map

package/dist/CSSValueInput.js.flow

@@ -5,39 +5,39 @@
  * @flow
  */
 
-import * as React from 'react';
-import type { CSSValueType } from '@acusti/css-values';
+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,
-    className?: string,
-    cssValueType?: CSSValueType,
-    disabled?: boolean,
-    getValueAsNumber?: (value: string | number) => number,
-    icon?: React.Node,
-    label?: string,
-    max?: number,
-    min?: number,
-    name?: string,
-    onBlur?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
-    onChange?: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
-    onFocus?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
-    onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-    onKeyUp?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-    onSubmitValue: (value: string) => mixed,
-    placeholder?: string,
-    step?: number,
-    tabIndex?: number,
-    title?: string,
-    unit?: string,
+  /**
+   * 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,
+  getValueAsNumber?: (value: string | number) => number,
+  icon?: React.Node,
+  label?: string,
+  max?: number,
+  min?: number,
+  name?: string,
+  onBlur?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
+  onChange?: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onFocus?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
+  onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  onKeyUp?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  onSubmitValue: (value: string) => mixed,
+  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,
+  /**
+   * Regex or validator function to validate non-numeric values
+   */
+  validator?: RegExp | ((value: string) => boolean),
+  value?: string,
 |};
 declare var CSSValueInput: React.StatelessFunctionalComponent<Props>;
 declare export default typeof CSSValueInput;

package/dist/CSSValueInput.js.map

@@ -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,mBAAmB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;AAE3D,MAAM,eAAe,GAAG,eAAe,CAAC;AAExC,MAAM,aAAa,GAAoB,KAAK,CAAC,UAAU,CACnD,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,GACR,EACD,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;IAErE,MAAM,iBAAiB,GAAG,MAAM,CAAS,KAAK,IAAI,EAAE,CAAC,CAAC;IAEtD,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAE9B,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC;QAC5C,mEAAmE;QACnE,iBAAiB,CAAC,OAAO,GAAG,YAAY,CAAC;QACzC,aAAa,CAAC,YAAY,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,WAAW,CAC1B,CAAC,KAAyC,EAAE,EAAE;QAC1C,IAAI,MAAM;YAAE,MAAM,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAE9B,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAEnD,wEAAwE;QACxE,IAAI,UAAU,IAAI,CAAC,YAAY,EAAE;YAC7B,iBAAiB,EAAE,CAAC;YACpB,OAAO;SACV;QAED,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAC5D,MAAM,oBAAoB,GAAG,MAAM,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;QAEnE,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,EAAE,CAAC;aACvB;iBAAM;gBACH,+DAA+D;gBAC/D,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC;aACtD;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,EAAE,IAAI;gBACjB,KAAK,EAAE,YAAY;aACtB,CAAC,CAAC;YACH,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,uBAAuB,GAAG,WAAW,CAAC;SAClE;aAAM;YACH,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,mBAAmB,CAAC;gBACzC,YAAY;gBACZ,WAAW,EAAE,IAAI;gBACjB,KAAK,EAAE,YAAY;aACtB,CAAC,CAAC;SACN;QAED,iBAAiB,EAAE,CAAC;IACxB,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,IAAI,SAAS;YAAE,SAAS,CAAC,KAAK,CAAC,CAAC;QAEhC,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC;QAClC,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,EAAE,CAAC;SACvB;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"}
+{"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/css-value-input",
-    "version": "0.23.0",
+    "version": "0.25.0",
     "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",
@@ -41,7 +41,7 @@
     },
     "dependencies": {
         "@acusti/css-values": "^0.19.0",
-        "@acusti/input-text": "^1.0.1",
+        "@acusti/input-text": "^1.2.0",
         "clsx": "^1.2.1"
     },
     "peerDependencies": {

package/src/CSSValueInput.tsx

@@ -80,25 +80,27 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
 
         const submittedValueRef = useRef<string>(value || '');
 
-        const handleSubmitValue = useCallback(() => {
-            if (!inputRef.current) return;
-
-            const currentValue = inputRef.current.value;
-            // Store last submittedValue (used to reset value on invalid input)
-            submittedValueRef.current = currentValue;
-            onSubmitValue(currentValue);
-        }, [onSubmitValue]);
+        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);
-                if (!inputRef.current) return;
 
-                const currentValue = inputRef.current.value.trim();
+                const currentValue = input.value.trim();
 
                 // If allowEmpty and value is empty, skip all validation + normalization
                 if (allowEmpty && !currentValue) {
-                    handleSubmitValue();
+                    handleSubmitValue(event);
                     return;
                 }
 
@@ -114,10 +116,10 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
                     }
 
                     if (isValid) {
-                        handleSubmitValue();
+                        handleSubmitValue(event);
                     } else {
                         // If current value isn’t valid, revert to last submitted value
-                        inputRef.current.value = submittedValueRef.current;
+                        input.value = submittedValueRef.current;
                     }
 
                     return;
@@ -142,16 +144,16 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
                         defaultUnit: unit,
                         value: currentValue,
                     });
-                    inputRef.current.value = normalizedValueAsNumber + currentUnit;
+                    input.value = normalizedValueAsNumber + currentUnit;
                 } else {
-                    inputRef.current.value = getCSSValueWithUnit({
+                    input.value = getCSSValueWithUnit({
                         cssValueType,
                         defaultUnit: unit,
                         value: currentValue,
                     });
                 }
 
-                handleSubmitValue();
+                handleSubmitValue(event);
             },
             [
                 allowEmpty,
@@ -213,9 +215,10 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
 
         const handleKeyDown = useCallback(
             (event: React.KeyboardEvent<HTMLInputElement>) => {
+                const input = event.currentTarget;
+                inputRef.current = input;
                 if (onKeyDown) onKeyDown(event);
 
-                const input = event.currentTarget;
                 const currentValue = input.value || placeholder || `0${unit}`;
                 let nextValue = '';
 
@@ -254,7 +257,7 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
                 if (onKeyUp) onKeyUp(event);
                 // If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
                 if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-                    handleSubmitValue();
+                    handleSubmitValue(event);
                 }
             },
             [handleSubmitValue, onKeyUp],