@ikatec/nebula-react 1.0.10 → 1.0.11

package/dist/index.d.mts

@@ -15,6 +15,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as RPNInput from 'react-phone-number-input';
 
 declare enum buttonVariantEnum {
     primary = "\n    bg-button-primary-background-default\n    hover:bg-button-primary-background-hover\n    active:bg-button-primary-background-active\n    focus:bg-button-primary-background-focus\n    focus:ring-button-primary-border-focus\n    text-button-primary-text\n  ",
@@ -495,7 +496,13 @@ interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
 }
 declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
 
-declare function InputPhone(): react_jsx_runtime.JSX.Element;
+type InputPhoneProps = {
+    isError?: boolean;
+    defaultCountry?: RPNInput.Country;
+    onChange: (value: string) => void;
+    value?: string | null;
+} & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
+declare function InputPhone({ className, disabled, isError, defaultCountry, value, onChange, ...props }: InputPhoneProps): react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
 }

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as RPNInput from 'react-phone-number-input';
 
 declare enum buttonVariantEnum {
     primary = "\n    bg-button-primary-background-default\n    hover:bg-button-primary-background-hover\n    active:bg-button-primary-background-active\n    focus:bg-button-primary-background-focus\n    focus:ring-button-primary-border-focus\n    text-button-primary-text\n  ",
@@ -495,7 +496,13 @@ interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
 }
 declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
 
-declare function InputPhone(): react_jsx_runtime.JSX.Element;
+type InputPhoneProps = {
+    isError?: boolean;
+    defaultCountry?: RPNInput.Country;
+    onChange: (value: string) => void;
+    value?: string | null;
+} & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
+declare function InputPhone({ className, disabled, isError, defaultCountry, value, onChange, ...props }: InputPhoneProps): react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
 }

package/dist/index.js

@@ -3569,26 +3569,53 @@ var PhoneInput = React8__namespace.default.forwardRef(({ className, ...props },
 });
 PhoneInput.displayName = "Input";
 function InputPhone({
-  value,
-  onChange,
   className,
   disabled,
   isError = false,
   defaultCountry = "BR",
+  value,
+  onChange,
   ...props
 }) {
+  const [valueState, setValueState] = React8.useState("");
+  const [isFirstRender, setIsFirstRender] = React8.useState(true);
   const countryCode = defaultCountry ? RPNInput__namespace.getCountryCallingCode(defaultCountry) : null;
-  const valueCorrection = React8__namespace.default.useMemo(() => {
-    if (!value || !countryCode) return "";
-    const stringValue = value.toString().trim();
-    if (stringValue.startsWith("+")) {
-      return stringValue;
-    }
-    if (stringValue.startsWith(countryCode)) {
-      return `+${stringValue}`;
+  const normalizePhoneNumber = React8.useCallback(
+    (inputValue) => {
+      if (!inputValue) return "";
+      const cleanValue = inputValue.toString().replace(/[^\d+]/g, "");
+      if (!cleanValue) return "";
+      if (cleanValue.startsWith("+")) {
+        return cleanValue;
+      }
+      if (countryCode && cleanValue.startsWith(countryCode)) {
+        return `+${cleanValue}`;
+      }
+      if (countryCode && /^\d{10,11}$/.test(cleanValue)) {
+        return `+${countryCode}${cleanValue}`;
+      }
+      return cleanValue;
+    },
+    [countryCode]
+  );
+  React8.useEffect(() => {
+    if (value !== void 0 && value !== null) {
+      const normalizedValue = normalizePhoneNumber(value);
+      setValueState(normalizedValue);
+    } else {
+      setValueState("");
     }
-    return `+${countryCode}${stringValue}`;
-  }, [value, countryCode]);
+  }, [value, normalizePhoneNumber]);
+  const handleChange = React8.useCallback(
+    (newValue) => {
+      setIsFirstRender(false);
+      setValueState(newValue);
+      if (onChange) {
+        onChange(newValue || "");
+      }
+    },
+    [onChange]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     RPNInput__namespace.default,
     {
@@ -3601,16 +3628,16 @@ function InputPhone({
         className
       ),
       flagComponent: FlagComponent,
-      limitMaxLength: true,
       countrySelectComponent: CountrySelect,
       inputComponent: PhoneInput,
       disabled,
-      value: valueCorrection,
-      onChange: (newValue) => onChange(newValue ?? ""),
-      defaultCountry,
-      countryCallingCodeEditable: true,
       international: true,
-      ...props
+      limitMaxLength: true,
+      defaultCountry: isFirstRender && (!value || value === "") ? defaultCountry : valueState ? defaultCountry : void 0,
+      countryCallingCodeEditable: true,
+      ...props,
+      value: valueState,
+      onChange: handleChange
     }
   );
 }

package/dist/index.mjs

@@ -3529,26 +3529,53 @@ var PhoneInput = React8__default.forwardRef(({ className, ...props }, ref) => {
 });
 PhoneInput.displayName = "Input";
 function InputPhone({
-  value,
-  onChange,
   className,
   disabled,
   isError = false,
   defaultCountry = "BR",
+  value,
+  onChange,
   ...props
 }) {
+  const [valueState, setValueState] = useState("");
+  const [isFirstRender, setIsFirstRender] = useState(true);
   const countryCode = defaultCountry ? RPNInput.getCountryCallingCode(defaultCountry) : null;
-  const valueCorrection = React8__default.useMemo(() => {
-    if (!value || !countryCode) return "";
-    const stringValue = value.toString().trim();
-    if (stringValue.startsWith("+")) {
-      return stringValue;
-    }
-    if (stringValue.startsWith(countryCode)) {
-      return `+${stringValue}`;
+  const normalizePhoneNumber = useCallback(
+    (inputValue) => {
+      if (!inputValue) return "";
+      const cleanValue = inputValue.toString().replace(/[^\d+]/g, "");
+      if (!cleanValue) return "";
+      if (cleanValue.startsWith("+")) {
+        return cleanValue;
+      }
+      if (countryCode && cleanValue.startsWith(countryCode)) {
+        return `+${cleanValue}`;
+      }
+      if (countryCode && /^\d{10,11}$/.test(cleanValue)) {
+        return `+${countryCode}${cleanValue}`;
+      }
+      return cleanValue;
+    },
+    [countryCode]
+  );
+  useEffect(() => {
+    if (value !== void 0 && value !== null) {
+      const normalizedValue = normalizePhoneNumber(value);
+      setValueState(normalizedValue);
+    } else {
+      setValueState("");
     }
-    return `+${countryCode}${stringValue}`;
-  }, [value, countryCode]);
+  }, [value, normalizePhoneNumber]);
+  const handleChange = useCallback(
+    (newValue) => {
+      setIsFirstRender(false);
+      setValueState(newValue);
+      if (onChange) {
+        onChange(newValue || "");
+      }
+    },
+    [onChange]
+  );
   return /* @__PURE__ */ jsx(
     RPNInput.default,
     {
@@ -3561,16 +3588,16 @@ function InputPhone({
         className
       ),
       flagComponent: FlagComponent,
-      limitMaxLength: true,
       countrySelectComponent: CountrySelect,
       inputComponent: PhoneInput,
       disabled,
-      value: valueCorrection,
-      onChange: (newValue) => onChange(newValue ?? ""),
-      defaultCountry,
-      countryCallingCodeEditable: true,
       international: true,
-      ...props
+      limitMaxLength: true,
+      defaultCountry: isFirstRender && (!value || value === "") ? defaultCountry : valueState ? defaultCountry : void 0,
+      countryCallingCodeEditable: true,
+      ...props,
+      value: valueState,
+      onChange: handleChange
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "React components",
   "publishConfig": {
     "access": "public"