numora-react 1.0.5 → 1.0.7

package/dist/handlers.d.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+import { type CaretPositionInfo, type FormattingOptions } from 'numora';
+type ChangeResult = {
+    value: string;
+    rawValue?: string;
+};
+type PasteResult = ChangeResult;
+type BlurResult = ChangeResult;
+type BaseOptions = {
+    decimalMaxLength: number;
+    caretPositionBeforeChange?: CaretPositionInfo;
+    formattingOptions: FormattingOptions & {
+        rawValueMode?: boolean;
+    };
+};
+export declare function handleNumoraOnChange(e: React.ChangeEvent<HTMLInputElement>, options: BaseOptions): ChangeResult;
+export declare function handleNumoraOnPaste(e: React.ClipboardEvent<HTMLInputElement>, options: Omit<BaseOptions, 'caretPositionBeforeChange'>): PasteResult;
+export declare function handleNumoraOnKeyDown(e: React.KeyboardEvent<HTMLInputElement>, formattingOptions: FormattingOptions): CaretPositionInfo | undefined;
+export declare function handleNumoraOnBlur(e: React.FocusEvent<HTMLInputElement>, options: {
+    decimalMaxLength: number;
+    formattingOptions: FormattingOptions & {
+        rawValueMode?: boolean;
+    };
+}): BlurResult;
+export {};

package/dist/index.cjs

@@ -0,0 +1,171 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var numora = require('numora');
+
+function handleNumoraOnChange(e, options) {
+    numora.handleOnChangeNumoraInput(e.nativeEvent, options.decimalMaxLength, options.caretPositionBeforeChange, options.formattingOptions);
+    const target = e.target;
+    const rawValue = target.getAttribute('data-raw-value') ?? undefined;
+    if (rawValue) {
+        target.removeAttribute('data-raw-value');
+    }
+    return {
+        value: target.value,
+        rawValue,
+    };
+}
+function handleNumoraOnPaste(e, options) {
+    const value = numora.handleOnPasteNumoraInput(e.nativeEvent, options.decimalMaxLength, options.formattingOptions);
+    const target = e.target;
+    const rawValue = target.getAttribute('data-raw-value') ?? undefined;
+    if (rawValue) {
+        target.removeAttribute('data-raw-value');
+    }
+    return {
+        value,
+        rawValue,
+    };
+}
+function handleNumoraOnKeyDown(e, formattingOptions) {
+    return numora.handleOnKeyDownNumoraInput(e.nativeEvent, formattingOptions);
+}
+function handleNumoraOnBlur(e, options) {
+    // If formatOn is blur, force formatting on blur by invoking change handler logic
+    if (options.formattingOptions.formatOn === numora.FormatOn.Blur) {
+        numora.handleOnChangeNumoraInput(e.nativeEvent, options.decimalMaxLength, undefined, { ...options.formattingOptions, formatOn: numora.FormatOn.Change });
+    }
+    const target = e.target;
+    const rawValue = target.getAttribute('data-raw-value') ?? undefined;
+    if (rawValue) {
+        target.removeAttribute('data-raw-value');
+    }
+    return {
+        value: target.value,
+        rawValue,
+    };
+}
+
+const NumoraInput = react.forwardRef((props, ref) => {
+    const { maxDecimals = 2, onChange, onPaste, onBlur, onKeyDown, formatOn = numora.FormatOn.Blur, thousandSeparator = ',', thousandStyle = numora.ThousandStyle.Thousand, decimalSeparator = '.', decimalMinLength, enableCompactNotation = false, enableNegative = false, enableLeadingZeros = false, rawValueMode = false, value: controlledValue, defaultValue, ...rest } = props;
+    const inputRef = react.useRef(null);
+    const caretInfoRef = react.useRef(undefined);
+    const [internalValue, setInternalValue] = react.useState(controlledValue !== undefined
+        ? String(controlledValue)
+        : defaultValue !== undefined
+            ? String(defaultValue)
+            : '');
+    // Keep internal state in sync when controlled
+    react.useEffect(() => {
+        if (controlledValue !== undefined) {
+            setInternalValue(String(controlledValue));
+        }
+    }, [controlledValue]);
+    react.useImperativeHandle(ref, () => inputRef.current, []);
+    const formattingOptions = {
+        formatOn,
+        thousandSeparator,
+        ThousandStyle: thousandStyle,
+        decimalSeparator,
+        decimalMinLength,
+        enableCompactNotation,
+        enableNegative,
+        enableLeadingZeros,
+        rawValueMode,
+    };
+    const formatValueWithCore = (value) => {
+        const el = inputRef.current ?? document.createElement('input');
+        el.value = value;
+        const fakeEvent = { target: el };
+        numora.handleOnChangeNumoraInput(fakeEvent, maxDecimals, undefined, formattingOptions);
+        return el.value;
+    };
+    // When controlled value changes, normalize/format it for display
+    react.useEffect(() => {
+        if (controlledValue !== undefined) {
+            const formatted = formatValueWithCore(String(controlledValue));
+            setInternalValue(formatted);
+        }
+    }, [controlledValue, formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength, enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode, maxDecimals]);
+    const handleChange = (e) => {
+        const { value, rawValue } = handleNumoraOnChange(e, {
+            decimalMaxLength: maxDecimals,
+            caretPositionBeforeChange: caretInfoRef.current,
+            formattingOptions,
+        });
+        caretInfoRef.current = undefined;
+        if (controlledValue === undefined) {
+            setInternalValue(value);
+        }
+        else {
+            setInternalValue(value);
+        }
+        if (onChange) {
+            onChange(e);
+        }
+        // Optionally expose rawValue via a custom event attribute if needed later
+        if (rawValue && e.target && rawValueMode) {
+            // Keep the raw value on the input for consumers that read it directly
+            e.target.setAttribute('data-raw-value', rawValue);
+        }
+    };
+    const handlePaste = (e) => {
+        const { value, rawValue } = handleNumoraOnPaste(e, {
+            decimalMaxLength: maxDecimals,
+            formattingOptions,
+        });
+        if (controlledValue === undefined) {
+            setInternalValue(value);
+        }
+        else {
+            setInternalValue(value);
+        }
+        if (onPaste) {
+            onPaste(e);
+        }
+        if (onChange) {
+            onChange(e);
+        }
+        if (rawValue && e.target && rawValueMode) {
+            e.target.setAttribute('data-raw-value', rawValue);
+        }
+    };
+    const handleKeyDown = (e) => {
+        caretInfoRef.current = handleNumoraOnKeyDown(e, formattingOptions);
+        if (onKeyDown) {
+            onKeyDown(e);
+        }
+    };
+    const handleBlur = (e) => {
+        const { value, rawValue } = handleNumoraOnBlur(e, {
+            decimalMaxLength: maxDecimals,
+            formattingOptions,
+        });
+        if (controlledValue === undefined) {
+            setInternalValue(value);
+        }
+        else {
+            setInternalValue(value);
+        }
+        if (onBlur) {
+            onBlur(e);
+        }
+        if (rawValue && e.target && rawValueMode) {
+            e.target.setAttribute('data-raw-value', rawValue);
+        }
+    };
+    return (jsxRuntime.jsx("input", { ...rest, ref: inputRef, value: internalValue, onChange: handleChange, onPaste: handlePaste, onKeyDown: handleKeyDown, onBlur: handleBlur, type: "text", inputMode: "decimal" }));
+});
+NumoraInput.displayName = 'NumoraInput';
+
+Object.defineProperty(exports, "FormatOn", {
+    enumerable: true,
+    get: function () { return numora.FormatOn; }
+});
+Object.defineProperty(exports, "ThousandStyle", {
+    enumerable: true,
+    get: function () { return numora.ThousandStyle; }
+});
+exports.NumoraInput = NumoraInput;
+//# sourceMappingURL=index.cjs.map