@xanui/ui 1.1.59 → 1.1.60

package/InputNumber/index.cjs

@@ -5,48 +5,45 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('../Input/index.cjs');
 var UnfoldMore = require('@xanui/icons/UnfoldMore');
+var core = require('@xanui/core');
 
 const InputNumber = React.forwardRef((props, ref) => {
     var _a;
-    // Check if current value is numeric
-    const isNumeric = props.value === undefined || props.value === '' || !isNaN(Number(props.value));
+    const [_val, setVal] = React.useState((_a = props.value) !== null && _a !== void 0 ? _a : "");
+    const inputRef = React.useRef(null);
+    const mergeRef = core.useMergeRefs(inputRef, ref);
+    React.useEffect(() => {
+        if (inputRef.current && (props === null || props === void 0 ? void 0 : props.onChange)) {
+            inputRef.current.value = _val.includes(".") ? parseFloat(_val) : parseInt(_val);
+            const syntheticEvent = {
+                target: inputRef.current,
+                currentTarget: inputRef.current,
+            };
+            props === null || props === void 0 ? void 0 : props.onChange(syntheticEvent);
+        }
+    }, [_val]);
+    const isNumeric = _val === undefined || _val === '' || !isNaN(Number(_val));
     const errorProps = {};
     if (!isNumeric) {
         errorProps.error = true;
         errorProps.helperText = "Value must be numeric";
     }
-    // Handle arrow up/down for increment/decrement
-    const handleKeyDown = (e) => {
-        var _a, _b;
-        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
-            return;
-        e.preventDefault();
-        const current = parseFloat(props.value) || 0;
-        const newVal = e.key === 'ArrowUp' ? current + 1 : current - 1;
-        if (ref && 'current' in ref && ref.current) {
-            ref.current.value = String(newVal);
-        }
-        // Trigger onChange manually
-        const syntheticEvent = Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { value: String(newVal) }) });
-        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, syntheticEvent);
-    };
-    // Handle input change with float support
-    const handleChange = (e) => {
-        var _a;
-        let val = e.target.value;
-        // Remove invalid characters except digits and dot
-        val = val.replace(/[^0-9.]/g, '');
-        // Only allow one dot
-        const parts = val.split('.');
-        if (parts.length > 2) {
-            val = parts[0] + '.' + parts.slice(1).join('');
-        }
-        // Keep trailing dot while typing
-        e.target.value = val;
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    };
-    return (jsxRuntime.jsx(index, Object.assign({}, props, errorProps, { ref: ref, endIcon: jsxRuntime.jsx(UnfoldMore, {}), onKeyDown: handleKeyDown, onChange: handleChange, value: (_a = props.value) !== null && _a !== void 0 ? _a : "" })));
+    return (jsxRuntime.jsx(index, Object.assign({}, props, errorProps, { ref: mergeRef, endIcon: jsxRuntime.jsx(UnfoldMore, {}), value: _val !== null && _val !== void 0 ? _val : "", onKeyDown: (e) => {
+            var _a;
+            (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
+                return;
+            e.preventDefault();
+            const current = parseFloat(_val) || 0;
+            setVal(e.key === 'ArrowUp' ? current + 1 : current - 1);
+        }, onChange: (e) => {
+            let val = e.target.value.replace(/[^0-9.]/g, '');
+            const parts = val.split('.');
+            if (parts.length > 2) {
+                val = parts[0] + '.' + parts.slice(1).join('');
+            }
+            setVal(val === "." ? `0.` : val);
+        } })));
 });
 
 module.exports = InputNumber;

package/InputNumber/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport Input, { InputProps } from '../Input'\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\n\nexport type InputNumberProps = Omit<InputProps, \"value\"> & {\n   value?: number | string; // allow string so typing \".\" works\n}\n\nconst InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {\n   // Check if current value is numeric\n   const isNumeric = props.value === undefined || props.value === '' || !isNaN(Number(props.value));\n\n   const errorProps: Partial<InputProps> = {};\n   if (!isNumeric) {\n      errorProps.error = true;\n      errorProps.helperText = \"Value must be numeric\";\n   }\n\n   // Handle arrow up/down for increment/decrement\n   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      props.onKeyDown?.(e);\n\n      if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n\n      e.preventDefault();\n      const current = parseFloat(props.value as any) || 0;\n      const newVal = e.key === 'ArrowUp' ? current + 1 : current - 1;\n\n      if (ref && 'current' in ref && ref.current) {\n         ref.current.value = String(newVal);\n      }\n\n      // Trigger onChange manually\n      const syntheticEvent = {\n         ...e,\n         target: {\n            ...e.target,\n            value: String(newVal),\n         }\n      } as unknown as React.ChangeEvent<HTMLInputElement>;\n\n      props.onChange?.(syntheticEvent);\n   };\n\n   // Handle input change with float support\n   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      let val = e.target.value;\n\n      // Remove invalid characters except digits and dot\n      val = val.replace(/[^0-9.]/g, '');\n\n      // Only allow one dot\n      const parts = val.split('.');\n      if (parts.length > 2) {\n         val = parts[0] + '.' + parts.slice(1).join('');\n      }\n\n      // Keep trailing dot while typing\n      e.target.value = val;\n\n      props.onChange?.(e);\n   };\n\n   return (\n      <Input\n         {...props}\n         {...errorProps}\n         ref={ref}\n         endIcon={<UnfoldMore />}\n         onKeyDown={handleKeyDown as any}\n         onChange={handleChange as any}\n         value={props.value ?? \"\" as any}\n      />\n   );\n});\n\nexport default InputNumber;\n"],"names":[],"mappings":";;;;;;;;AASA;;;;;;AAMM;AACA;;;AAIH;;AACG;;;;;AAMA;;;;;AAOA;AAQA;AACH;;AAGA;;AACG;;;;;AAOA;AACG;;;AAIH;AAEA;AACH;AAEA;AAWH;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { useEffect, useRef, useState } from 'react'\nimport Input, { InputProps } from '../Input'\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\nimport { useMergeRefs } from '@xanui/core'\n\nexport type InputNumberProps = Omit<InputProps, \"value\"> & {\n   value?: number; // allow string so typing \".\" works\n}\n\nconst InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {\n   const [_val, setVal] = useState<string>(props.value as any ?? \"\")\n   const inputRef = useRef<any>(null)\n   const mergeRef = useMergeRefs(inputRef, ref)\n   useEffect(() => {\n      if (inputRef.current && props?.onChange) {\n         inputRef.current.value = _val.includes(\".\") ? parseFloat(_val) : parseInt(_val)\n         const syntheticEvent = {\n            target: inputRef.current,\n            currentTarget: inputRef.current,\n         } as unknown as React.ChangeEvent<HTMLInputElement>;\n         props?.onChange(syntheticEvent)\n      }\n   }, [_val])\n\n   const isNumeric = _val === undefined || _val === '' || !isNaN(Number(_val));\n   const errorProps: Partial<InputProps> = {};\n   if (!isNumeric) {\n      errorProps.error = true;\n      errorProps.helperText = \"Value must be numeric\";\n   }\n\n   return (\n      <Input\n         {...props}\n         {...errorProps}\n         ref={mergeRef}\n         endIcon={<UnfoldMore />}\n         value={_val ?? \"\" as any}\n         onKeyDown={(e: any) => {\n            props.onKeyDown?.(e);\n\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n\n            e.preventDefault();\n            const current = parseFloat(_val as any) || 0;\n            setVal(e.key === 'ArrowUp' ? current + 1 : current - 1 as any);\n         }}\n         onChange={(e) => {\n            let val: any = e.target.value.replace(/[^0-9.]/g, '')\n            const parts = val.split('.');\n            if (parts.length > 2) {\n               val = parts[0] + '.' + parts.slice(1).join('')\n            }\n            setVal(val === \".\" ? `0.` : val);\n         }}\n      />\n   );\n});\n\nexport default InputNumber;\n"],"names":[],"mappings":";;;;;;;;;AAUA;;AACG;AACA;;;AAGG;;AAEG;;;;;;AAMN;AAEA;;;AAGG;AACA;;AAGH;;AAQS;;;;;AAMA;AACH;AAEG;;AAEA;AACG;;AAEH;;AAIZ;;"}

package/InputNumber/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { InputProps } from '../Input/index.js';
 
 type InputNumberProps = Omit<InputProps, "value"> & {
-    value?: number | string;
+    value?: number;
 };
 declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 

package/InputNumber/index.js

@@ -1,50 +1,47 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import Input from '../Input/index.js';
 import UnfoldMore from '@xanui/icons/UnfoldMore';
+import { useMergeRefs } from '@xanui/core';
 
 const InputNumber = React.forwardRef((props, ref) => {
     var _a;
-    // Check if current value is numeric
-    const isNumeric = props.value === undefined || props.value === '' || !isNaN(Number(props.value));
+    const [_val, setVal] = useState((_a = props.value) !== null && _a !== void 0 ? _a : "");
+    const inputRef = useRef(null);
+    const mergeRef = useMergeRefs(inputRef, ref);
+    useEffect(() => {
+        if (inputRef.current && (props === null || props === void 0 ? void 0 : props.onChange)) {
+            inputRef.current.value = _val.includes(".") ? parseFloat(_val) : parseInt(_val);
+            const syntheticEvent = {
+                target: inputRef.current,
+                currentTarget: inputRef.current,
+            };
+            props === null || props === void 0 ? void 0 : props.onChange(syntheticEvent);
+        }
+    }, [_val]);
+    const isNumeric = _val === undefined || _val === '' || !isNaN(Number(_val));
     const errorProps = {};
     if (!isNumeric) {
         errorProps.error = true;
         errorProps.helperText = "Value must be numeric";
     }
-    // Handle arrow up/down for increment/decrement
-    const handleKeyDown = (e) => {
-        var _a, _b;
-        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
-            return;
-        e.preventDefault();
-        const current = parseFloat(props.value) || 0;
-        const newVal = e.key === 'ArrowUp' ? current + 1 : current - 1;
-        if (ref && 'current' in ref && ref.current) {
-            ref.current.value = String(newVal);
-        }
-        // Trigger onChange manually
-        const syntheticEvent = Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { value: String(newVal) }) });
-        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, syntheticEvent);
-    };
-    // Handle input change with float support
-    const handleChange = (e) => {
-        var _a;
-        let val = e.target.value;
-        // Remove invalid characters except digits and dot
-        val = val.replace(/[^0-9.]/g, '');
-        // Only allow one dot
-        const parts = val.split('.');
-        if (parts.length > 2) {
-            val = parts[0] + '.' + parts.slice(1).join('');
-        }
-        // Keep trailing dot while typing
-        e.target.value = val;
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    };
-    return (jsx(Input, Object.assign({}, props, errorProps, { ref: ref, endIcon: jsx(UnfoldMore, {}), onKeyDown: handleKeyDown, onChange: handleChange, value: (_a = props.value) !== null && _a !== void 0 ? _a : "" })));
+    return (jsx(Input, Object.assign({}, props, errorProps, { ref: mergeRef, endIcon: jsx(UnfoldMore, {}), value: _val !== null && _val !== void 0 ? _val : "", onKeyDown: (e) => {
+            var _a;
+            (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
+                return;
+            e.preventDefault();
+            const current = parseFloat(_val) || 0;
+            setVal(e.key === 'ArrowUp' ? current + 1 : current - 1);
+        }, onChange: (e) => {
+            let val = e.target.value.replace(/[^0-9.]/g, '');
+            const parts = val.split('.');
+            if (parts.length > 2) {
+                val = parts[0] + '.' + parts.slice(1).join('');
+            }
+            setVal(val === "." ? `0.` : val);
+        } })));
 });
 
 export { InputNumber as default };

package/InputNumber/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport Input, { InputProps } from '../Input'\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\n\nexport type InputNumberProps = Omit<InputProps, \"value\"> & {\n   value?: number | string; // allow string so typing \".\" works\n}\n\nconst InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {\n   // Check if current value is numeric\n   const isNumeric = props.value === undefined || props.value === '' || !isNaN(Number(props.value));\n\n   const errorProps: Partial<InputProps> = {};\n   if (!isNumeric) {\n      errorProps.error = true;\n      errorProps.helperText = \"Value must be numeric\";\n   }\n\n   // Handle arrow up/down for increment/decrement\n   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      props.onKeyDown?.(e);\n\n      if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n\n      e.preventDefault();\n      const current = parseFloat(props.value as any) || 0;\n      const newVal = e.key === 'ArrowUp' ? current + 1 : current - 1;\n\n      if (ref && 'current' in ref && ref.current) {\n         ref.current.value = String(newVal);\n      }\n\n      // Trigger onChange manually\n      const syntheticEvent = {\n         ...e,\n         target: {\n            ...e.target,\n            value: String(newVal),\n         }\n      } as unknown as React.ChangeEvent<HTMLInputElement>;\n\n      props.onChange?.(syntheticEvent);\n   };\n\n   // Handle input change with float support\n   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      let val = e.target.value;\n\n      // Remove invalid characters except digits and dot\n      val = val.replace(/[^0-9.]/g, '');\n\n      // Only allow one dot\n      const parts = val.split('.');\n      if (parts.length > 2) {\n         val = parts[0] + '.' + parts.slice(1).join('');\n      }\n\n      // Keep trailing dot while typing\n      e.target.value = val;\n\n      props.onChange?.(e);\n   };\n\n   return (\n      <Input\n         {...props}\n         {...errorProps}\n         ref={ref}\n         endIcon={<UnfoldMore />}\n         onKeyDown={handleKeyDown as any}\n         onChange={handleChange as any}\n         value={props.value ?? \"\" as any}\n      />\n   );\n});\n\nexport default InputNumber;\n"],"names":[],"mappings":";;;;;;AASA;;;;;;AAMM;AACA;;;AAIH;;AACG;;;;;AAMA;;;;;AAOA;AAQA;AACH;;AAGA;;AACG;;;;;AAOA;AACG;;;AAIH;AAEA;AACH;AAEA;AAWH;;"}
+{"version":3,"file":"index.js","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { useEffect, useRef, useState } from 'react'\nimport Input, { InputProps } from '../Input'\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\nimport { useMergeRefs } from '@xanui/core'\n\nexport type InputNumberProps = Omit<InputProps, \"value\"> & {\n   value?: number; // allow string so typing \".\" works\n}\n\nconst InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {\n   const [_val, setVal] = useState<string>(props.value as any ?? \"\")\n   const inputRef = useRef<any>(null)\n   const mergeRef = useMergeRefs(inputRef, ref)\n   useEffect(() => {\n      if (inputRef.current && props?.onChange) {\n         inputRef.current.value = _val.includes(\".\") ? parseFloat(_val) : parseInt(_val)\n         const syntheticEvent = {\n            target: inputRef.current,\n            currentTarget: inputRef.current,\n         } as unknown as React.ChangeEvent<HTMLInputElement>;\n         props?.onChange(syntheticEvent)\n      }\n   }, [_val])\n\n   const isNumeric = _val === undefined || _val === '' || !isNaN(Number(_val));\n   const errorProps: Partial<InputProps> = {};\n   if (!isNumeric) {\n      errorProps.error = true;\n      errorProps.helperText = \"Value must be numeric\";\n   }\n\n   return (\n      <Input\n         {...props}\n         {...errorProps}\n         ref={mergeRef}\n         endIcon={<UnfoldMore />}\n         value={_val ?? \"\" as any}\n         onKeyDown={(e: any) => {\n            props.onKeyDown?.(e);\n\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n\n            e.preventDefault();\n            const current = parseFloat(_val as any) || 0;\n            setVal(e.key === 'ArrowUp' ? current + 1 : current - 1 as any);\n         }}\n         onChange={(e) => {\n            let val: any = e.target.value.replace(/[^0-9.]/g, '')\n            const parts = val.split('.');\n            if (parts.length > 2) {\n               val = parts[0] + '.' + parts.slice(1).join('')\n            }\n            setVal(val === \".\" ? `0.` : val);\n         }}\n      />\n   );\n});\n\nexport default InputNumber;\n"],"names":[],"mappings":";;;;;;;AAUA;;AACG;AACA;;;AAGG;;AAEG;;;;;;AAMN;AAEA;;;AAGG;AACA;;AAGH;;AAQS;;;;;AAMA;AACH;AAEG;;AAEA;AACG;;AAEH;;AAIZ;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/ui",
-  "version": "1.1.59",
+  "version": "1.1.60",
   "description": "Xanui - A React Component Library",
   "private": false,
   "dependencies": {