react-frontend-common-components 0.0.57 → 0.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-frontend-common-components",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "description": "Reusable frontend library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/app-phone-input/app-phone-input.tsx

@@ -1,13 +1,14 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import "react-phone-input-2/lib/style.css";
-import "./app-phone-input.css";
 import PhoneInput, { CountryData } from "react-phone-input-2";
+import "./app-phone-input.css";
 
 interface AppPhoneInputProps {
   value: string;
   countryCode?: string;
   handleChange: (phone: string, countryCode: string, uniCode: string) => void;
-  className:string;
+  className: string;
+  id: string;
 }
 
 const AppPhoneInput = ({
@@ -15,10 +16,21 @@ const AppPhoneInput = ({
   handleChange,
   countryCode,
   className,
+  id,
 }: AppPhoneInputProps) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+      const inputElement = wrapperRef.current.querySelector("input");
+      if (inputElement) {
+        inputElement.id = id;
+      }
+    }
+  }, [id]);
   return (
     <div className={className}>
-      <div className={"inputContainer"}>
+      <div className={"inputContainer"} ref={wrapperRef}>
         <PhoneInput
           value={value}
           country={"ae"}

package/src/components/app-select/app-select.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { Select } from "antd";
+import { Select, SelectProps } from "antd";
 import { MouseEventHandler } from "react";
 import "./app-select.css";
 
-interface AppSelectProps  {
+interface AppSelectProps extends SelectProps {
   className?: string;
   value?: string | null;
   dataTestId?: string;

package/src/components/app-sidebar/app-sidebar.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { Layout, Menu, SelectProps } from "antd";
+import { Layout, Menu } from "antd";
 import "./app-sidebar.css";
 
 const { Sider } = Layout;
 
-interface SidebarProps extends SelectProps {
+interface SidebarProps {
   links: {
     onClick?: () => void;
     label: string;