@ikatec/nebula-react 1.0.9 → 1.0.11

package/dist/index.d.mts

@@ -500,8 +500,9 @@ type InputPhoneProps = {
     isError?: boolean;
     defaultCountry?: RPNInput.Country;
     onChange: (value: string) => void;
+    value?: string | null;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
-declare function InputPhone({ value, onChange, className, disabled, isError, defaultCountry, ...props }: InputPhoneProps): react_jsx_runtime.JSX.Element;
+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

@@ -500,8 +500,9 @@ type InputPhoneProps = {
     isError?: boolean;
     defaultCountry?: RPNInput.Country;
     onChange: (value: string) => void;
+    value?: string | null;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
-declare function InputPhone({ value, onChange, className, disabled, isError, defaultCountry, ...props }: InputPhoneProps): react_jsx_runtime.JSX.Element;
+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

@@ -3552,14 +3552,14 @@ var FlagComponent = ({ country, countryName }) => {
 };
 var PhoneInput = React8__namespace.default.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex items-center justify-center rounded-e-[20px] w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Separator2, { orientation: "vertical", className: "nebula-ds w-[2px] h-5" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Separator2, { orientation: "vertical", className: "nebula-ds w-[1px] h-5 z-10" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       InputText,
       {
         "data-slot": "phone-input",
         ref,
         className: cn(
-          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0 focus:ring-0 border-0 w-full",
+          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0 focus:ring-0 border-0 w-full h-auto",
           className
         ),
         ...props
@@ -3569,20 +3569,58 @@ 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 valueCorrection = value && value.toString().length && !value.toString().startsWith("+") ? `+${value}` : value;
+  const [valueState, setValueState] = React8.useState("");
+  const [isFirstRender, setIsFirstRender] = React8.useState(true);
+  const countryCode = defaultCountry ? RPNInput__namespace.getCountryCallingCode(defaultCountry) : null;
+  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("");
+    }
+  }, [value, normalizePhoneNumber]);
+  const handleChange = React8.useCallback(
+    (newValue) => {
+      setIsFirstRender(false);
+      setValueState(newValue);
+      if (onChange) {
+        onChange(newValue || "");
+      }
+    },
+    [onChange]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     RPNInput__namespace.default,
     {
       className: cn(
-        "flex w-full bg-inputText-background-default rounded-[20px] border border-inputText-border-default focus-within:ring-[3px] focus-within:ring-inputText-border-focus focus-within:border-inputText-border-focus",
+        "flex w-full h-10 bg-inputText-background-default rounded-[20px] border border-inputText-border-default focus-within:ring-[3px] focus-within:ring-inputText-border-focus focus-within:border-inputText-border-focus",
         { "bg-inputText-background-disabled": disabled },
         {
           "text-inputText-icon-danger border-inputText-border-danger focus-within:border-inputText-border-danger focus-within:ring-button-danger-border-focus": isError
@@ -3590,16 +3628,16 @@ function InputPhone({
         className
       ),
       flagComponent: FlagComponent,
-      limitMaxLength: true,
       countrySelectComponent: CountrySelect,
       inputComponent: PhoneInput,
       disabled,
-      value: valueCorrection?.toString(),
-      onChange: (newValue) => onChange(newValue ?? ""),
+      international: true,
+      limitMaxLength: true,
+      defaultCountry: isFirstRender && (!value || value === "") ? defaultCountry : valueState ? defaultCountry : void 0,
       countryCallingCodeEditable: true,
-      initialValueFormat: "national",
-      defaultCountry,
-      ...props
+      ...props,
+      value: valueState,
+      onChange: handleChange
     }
   );
 }

package/dist/index.mjs

@@ -3512,14 +3512,14 @@ var FlagComponent = ({ country, countryName }) => {
 };
 var PhoneInput = React8__default.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex items-center justify-center rounded-e-[20px] w-full", children: [
-    /* @__PURE__ */ jsx(Separator2, { orientation: "vertical", className: "nebula-ds w-[2px] h-5" }),
+    /* @__PURE__ */ jsx(Separator2, { orientation: "vertical", className: "nebula-ds w-[1px] h-5 z-10" }),
     /* @__PURE__ */ jsx(
       InputText,
       {
         "data-slot": "phone-input",
         ref,
         className: cn(
-          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0 focus:ring-0 border-0 w-full",
+          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0 focus:ring-0 border-0 w-full h-auto",
           className
         ),
         ...props
@@ -3529,20 +3529,58 @@ 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 valueCorrection = value && value.toString().length && !value.toString().startsWith("+") ? `+${value}` : value;
+  const [valueState, setValueState] = useState("");
+  const [isFirstRender, setIsFirstRender] = useState(true);
+  const countryCode = defaultCountry ? RPNInput.getCountryCallingCode(defaultCountry) : null;
+  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("");
+    }
+  }, [value, normalizePhoneNumber]);
+  const handleChange = useCallback(
+    (newValue) => {
+      setIsFirstRender(false);
+      setValueState(newValue);
+      if (onChange) {
+        onChange(newValue || "");
+      }
+    },
+    [onChange]
+  );
   return /* @__PURE__ */ jsx(
     RPNInput.default,
     {
       className: cn(
-        "flex w-full bg-inputText-background-default rounded-[20px] border border-inputText-border-default focus-within:ring-[3px] focus-within:ring-inputText-border-focus focus-within:border-inputText-border-focus",
+        "flex w-full h-10 bg-inputText-background-default rounded-[20px] border border-inputText-border-default focus-within:ring-[3px] focus-within:ring-inputText-border-focus focus-within:border-inputText-border-focus",
         { "bg-inputText-background-disabled": disabled },
         {
           "text-inputText-icon-danger border-inputText-border-danger focus-within:border-inputText-border-danger focus-within:ring-button-danger-border-focus": isError
@@ -3550,16 +3588,16 @@ function InputPhone({
         className
       ),
       flagComponent: FlagComponent,
-      limitMaxLength: true,
       countrySelectComponent: CountrySelect,
       inputComponent: PhoneInput,
       disabled,
-      value: valueCorrection?.toString(),
-      onChange: (newValue) => onChange(newValue ?? ""),
+      international: true,
+      limitMaxLength: true,
+      defaultCountry: isFirstRender && (!value || value === "") ? defaultCountry : valueState ? defaultCountry : void 0,
       countryCallingCodeEditable: true,
-      initialValueFormat: "national",
-      defaultCountry,
-      ...props
+      ...props,
+      value: valueState,
+      onChange: handleChange
     }
   );
 }

package/package.json

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