v0.4.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@euk-labs/componentz",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",

src/components/Inputs/NumericField/NumericField.stories.tsx

@@ -8,7 +8,7 @@ export default {
 } as ComponentMeta<typeof NumericField>;
 
 const Template: ComponentStory<typeof NumericField> = (args) => {
-  const [value, setValue] = useState<number | string | null>(null);
+  const [value, setValue] = useState<number | string>('');
   return (
     <NumericField
       {...args}

src/components/Inputs/NumericField/index.tsx

@@ -1,15 +1,15 @@
 import type { TextFieldProps } from '@mui/material';
 import { TextField } from '@mui/material';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 export interface HTMLNumericElement
   extends Omit<HTMLInputElement, 'value' | 'name'> {
-  value: number | null | '';
+  value: number | '';
   name?: string;
 }
 
 export type NumericInputProps = Omit<TextFieldProps, 'onChange'> & {
-  value?: number | string | null;
+  value?: number | string;
   onChange?(e: React.ChangeEvent<HTMLNumericElement>): void;
 
   precision: number;
@@ -31,7 +31,7 @@ function verifyNumber(string: string) {
 // TODO: support negative numbers
 function NumericField(props: NumericInputProps) {
   const { value, precision, thousandChar, decimalChar, ...inputProps } = props;
-  const defaultValue = value === null ? NaN : Number(value);
+  const defaultValue = value === '' ? NaN : Number(value);
 
   const formatter = useMemo(
     () =>
@@ -40,7 +40,7 @@ function NumericField(props: NumericInputProps) {
         maximumFractionDigits: precision,
       }),
 
-    [thousandChar, decimalChar]
+    [thousandChar, decimalChar, precision]
   );
 
   if (!decimalChar) {
@@ -67,7 +67,10 @@ function NumericField(props: NumericInputProps) {
       e.shiftKey ||
       e.key === 'Backspace' ||
       e.key === 'Enter' ||
-      e.key === 'Tab'
+      e.key === 'Tab' ||
+      e.key === 'ArrowRight' ||
+      e.key === 'ArrowLeft' ||
+      e.key === 'Delete'
     )
       return;
     if (!verifyNumber(e.key).isNumber) e.preventDefault();
@@ -94,15 +97,15 @@ function NumericField(props: NumericInputProps) {
 
     if (numericRepresentation === '') {
       e.target.value = '';
-      newEvent.target.value = null;
-      newEvent.currentTarget.value = null;
+      newEvent.target.value = '';
+      newEvent.currentTarget.value = '';
       return props.onChange && props.onChange(newEvent);
     }
 
     const { isNumber, numberFomart } = verifyNumber(numericRepresentation);
-    if (isNumber && numberFomart) {
-      const withPrecision = numberFomart / 10 ** precision;
 
+    if (isNumber && numberFomart !== null && numberFomart >= 0) {
+      const withPrecision = numberFomart / 10 ** precision;
       const formattedNumber = format(withPrecision);
 
       newEvent.target.value = withPrecision;
@@ -120,7 +123,7 @@ function NumericField(props: NumericInputProps) {
 
   if (hasValue) {
     if (isNaN(defaultValue) || value === '') {
-      inputValue = null;
+      inputValue = '';
     } else {
       inputValue = format(defaultValue);
     }

yarn.lock

@@ -8963,9 +8963,9 @@ minimist-options@4.1.0:
     kind-of "^6.0.3"
 
 minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
 minipass-collect@^1.0.2:
   version "1.0.2"