From e6194a2254ff25194f99bc552be2c5212f739fd5 Mon Sep 17 00:00:00 2001
From: Tomas Trescak <tomi.trescak@gmail.com>
Date: Tue, 16 Apr 2024 20:40:37 +1000
Subject: [PATCH] Remove SSR error

---
 src/index.tsx | 26 +++++++++++++-------------
 src/types.tsx |  1 +
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index a511891..0b38ff8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,26 +1,26 @@
 import React, {
-  useState,
-  useRef,
-  useEffect,
   forwardRef,
+  useEffect,
   useImperativeHandle,
+  useRef,
+  useState,
 } from 'react';
 import ReactDOM from 'react-dom';
-import { PopupProps, PopupActions } from './types';
 import {
+  useIsomorphicLayoutEffect,
+  useOnClickOutside,
   useOnEscape,
   useRepositionOnResize,
-  useOnClickOutside,
   useTabbing,
-  useIsomorphicLayoutEffect,
 } from './hooks';
+import { PopupActions, PopupProps } from './types';
 
 import './index.css';
 
 import styles from './styles';
 import calculatePosition from './Utils';
 
-let popupIdCounter = 0;
+// let popupIdCounter = 0;
 
 const getRootPopup = () => {
   let PopupRoot = document.getElementById('popup-root');
@@ -37,6 +37,7 @@ const getRootPopup = () => {
 export const Popup = forwardRef<PopupActions, PopupProps>(
   (
     {
+      id = undefined,
       trigger = null,
       onOpen = () => {},
       onClose = () => {},
@@ -70,7 +71,6 @@ export const Popup = forwardRef<PopupActions, PopupProps>(
     const contentRef = useRef<HTMLElement>(null);
     const arrowRef = useRef<HTMLDivElement>(null);
     const focusedElBeforeOpen = useRef<Element | null>(null);
-    const popupId = useRef<string>(`popup-${++popupIdCounter}`);
 
     const isModal = modal ? true : !trigger;
     const timeOut = useRef<any>(0);
@@ -210,7 +210,7 @@ export const Popup = forwardRef<PopupActions, PopupProps>(
       const triggerProps: any = {
         key: 'T',
         ref: triggerRef,
-        'aria-describedby': popupId.current,
+        'aria-describedby': id,
       };
       const onAsArray = Array.isArray(on) ? on : [on];
       for (let i = 0, len = onAsArray.length; i < len; i++) {
@@ -251,7 +251,7 @@ export const Popup = forwardRef<PopupActions, PopupProps>(
           className !== ''
             ? className
                 .split(' ')
-                .map(c => `${c}-content`)
+                .map((c) => `${c}-content`)
                 .join(' ')
             : ''
         }`,
@@ -278,7 +278,7 @@ export const Popup = forwardRef<PopupActions, PopupProps>(
           {...addWarperAction()}
           key="C"
           role={isModal ? 'dialog' : 'tooltip'}
-          id={popupId.current}
+          id={id}
         >
           {arrow && !isModal && (
             <div ref={arrowRef} style={styles.popupArrow}>
@@ -288,7 +288,7 @@ export const Popup = forwardRef<PopupActions, PopupProps>(
                   className !== ''
                     ? className
                         .split(' ')
-                        .map(c => `${c}-arrow`)
+                        .map((c) => `${c}-arrow`)
                         .join(' ')
                     : ''
                 }`}
@@ -322,7 +322,7 @@ export const Popup = forwardRef<PopupActions, PopupProps>(
             className !== ''
               ? className
                   .split(' ')
-                  .map(c => `${c}-overlay`)
+                  .map((c) => `${c}-overlay`)
                   .join(' ')
               : ''
           }`}
diff --git a/src/types.tsx b/src/types.tsx
index 41090b7..7876758 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -22,6 +22,7 @@ export type PopupActions = {
   toggle: () => void;
 };
 export interface PopupProps {
+  id?: string | number;
   trigger?: JSX.Element | ((isOpen: boolean) => JSX.Element);
   open?: boolean;
   disabled?: boolean;