nebula-galaxy - npm Package Compare versions

Comparing version 0.9.9 to 0.9.10

dist/components/textfield/phone-number-textfield.d.ts

 import { ComponentProps } from 'react';
 import TextField from './textfield';
 import type { PhoneNumberTextFieldEvent } from '../../utils';
-export interface PhoneNumberTextFieldPropsProps extends Omit<ComponentProps<typeof TextField>, 'variant' | 'onChange'> {
+export interface PhoneNumberTextFieldProps extends Omit<ComponentProps<typeof TextField>, 'variant' | 'onChange'> {
     onChange: (e: PhoneNumberTextFieldEvent, valid: boolean) => void;
     variant: 'Outline' | 'Filled';
+    countryCodeValue?: string;
 }
-declare const PhoneNumberTextFieldProps: import("react").ForwardRefExoticComponent<Omit<PhoneNumberTextFieldPropsProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export default PhoneNumberTextFieldProps;
+declare const PhoneNumberTextField: import("react").ForwardRefExoticComponent<Omit<PhoneNumberTextFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export default PhoneNumberTextField;

dist/components/textfield/phone-number-textfield.js

@@ -24,2 +24,3 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { forwardRef, useState } from 'react';
@@ -33,6 +34,6 @@ import cn from 'classnames';
 import styles from './textfield.module.scss';
-var PhoneNumberTextFieldProps = forwardRef(function (_a, ref) {
-    var required = _a.required, onChange = _a.onChange, className = _a.className, props = __rest(_a, ["required", "onChange", "className"]);
-    var _b = useState('+234'), countryCode = _b[0], setCountryCode = _b[1];
-    var _c = useState(props.value), stateValue = _c[0], setStateValue = _c[1];
+var PhoneNumberTextField = forwardRef(function (_a, ref) {
+    var required = _a.required, onChange = _a.onChange, className = _a.className, countryCodeValue = _a.countryCodeValue, value = _a.value, props = __rest(_a, ["required", "onChange", "className", "countryCodeValue", "value"]);
+    var _b = useState(countryCodeValue || '+234'), countryCode = _b[0], setCountryCode = _b[1];
+    var _c = useState(value), stateValue = _c[0], setStateValue = _c[1];
     var _d = useState(false), isDropdownOpen = _d[0], setIsDropdownOpen = _d[1];
@@ -47,10 +48,9 @@ var handleOnChange = function (_a) {
         }
-        var trimmedValue = value.trim().replace(' ', '').replace(/,/g, '');
-        var parsedValue = Number.parseFloat(trimmedValue);
-        var isNotNumber = Number.isNaN(parsedValue);
+        var trimmedValue = value
+            .trim()
+            .replace(' ', '')
+            .replace(/,/g, '');
         var numericValue = trimmedValue.replace(checkAlphaChars, '');
-        if (!isNotNumber) {
-            onChange({ target: { name: name, value: value, countryCode: countryCode } }, true);
-            setStateValue(numericValue);
-        }
+        onChange({ target: { name: name, value: numericValue, countryCode: countryCode } }, true);
+        setStateValue(numericValue);
     };
@@ -68,3 +68,9 @@ var handleCountryCodeChange = function (code) {
     };
-    return (_jsx(Popper, __assign({ anchorElement: _jsx(TextField, __assign({}, props, { className: cn(className, styles.phoneNumberTextfield), ref: ref, value: stateValue, onChange: handleOnChange, type: "text", placeholder: "123-456-7890", leftAddon: _jsx(_Fragment, { children: _jsxs("button", __assign({ className: styles.countryCodeSelect, onClick: function () {
+    useEffect(function () {
+        countryCodeValue && setCountryCode(countryCodeValue);
+    }, [countryCodeValue]);
+    useEffect(function () {
+        setStateValue(value);
+    }, [value]);
+    return (_jsx(Popper, __assign({ anchorElement: _jsx(TextField, __assign({}, props, { className: cn(className, styles.phoneNumberTextfield), ref: ref, value: stateValue, onChange: handleOnChange, type: "number", placeholder: "123-456-7890", leftAddon: _jsx(_Fragment, { children: _jsxs("button", __assign({ type: "button", className: styles.countryCodeSelect, onClick: function () {
                         return setIsDropdownOpen(!isDropdownOpen);
@@ -78,3 +84,3 @@ } }, { children: [_jsx("span", __assign({ className: cn('p5', styles.countryCodeDisplay) }, { children: countryCode })), _jsx(Icon, { size: "SM", name: "ChevronDown" })] })) }) })), isOpen: isDropdownOpen,
 });
-PhoneNumberTextFieldProps.displayName = 'PhoneNumberTextFieldProps';
-export default PhoneNumberTextFieldProps;
+PhoneNumberTextField.displayName = 'PhoneNumberTextField';
+export default PhoneNumberTextField;

dist/components/textfield/textfield.js

@@ -49,2 +49,5 @@ var __assign = (this && this.__assign) || function () {
         var isValidCopy = required ? !!value : true;
+        if (type === 'number') {
+            value = value.replace(/[^0-9]/g, ''); // Only allow numeric characters
+        }
         if (type === 'email') {
@@ -51,0 +54,0 @@ var re = /[^@]+@[^@]+\.[^@]+/;

package.json

 {
     "name": "nebula-galaxy",
-    "version": "0.9.9",
+    "version": "0.9.10",
     "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

478288

increased by0.07%

Lines of code

4304

increased by0.23%

No dependency changes