@momo-kits/foundation 0.155.1-ds365.1 → 0.156.1-alpha.1

package/Application/StackScreen.tsx

@@ -7,6 +7,7 @@ import { ApplicationContext, MiniAppContext, ScreenContext } from '../Context';
 import { GridSystem } from '../Layout';
 import { version } from '../package.json';
 import { useAppState } from './utils';
+import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal.tsx';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
@@ -407,8 +408,11 @@ const StackScreen: React.FC<any> = props => {
         },
       }}
     >
-      <Component heightHeader={heightHeader} {...data} />
-      {showGrid && <GridSystem />}
+      <TooltipPortalProvider>
+        <Component heightHeader={heightHeader} {...data} />
+        {showGrid && <GridSystem />}
+        <TooltipPortalHost />
+      </TooltipPortalProvider>
     </ScreenContext.Provider>
   );
 };

package/Application/TooltipPortal.tsx

@@ -0,0 +1,125 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  ReactNode,
+  useMemo,
+  useReducer,
+  useRef,
+  RefObject,
+} from 'react';
+import { View, StyleSheet } from 'react-native';
+
+interface TooltipPortalContextValue {
+  register: (id: string, content: ReactNode) => void;
+  unregister: (id: string, immediate?: boolean) => void;
+  portals: Map<string, ReactNode>;
+  hostRef: RefObject<View | null>;
+}
+
+const TooltipPortalContext = createContext<TooltipPortalContextValue | null>(
+  null,
+);
+
+export const TooltipPortalProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  // Use ref for synchronous updates + reducer for manual re-renders
+  const portalsRef = useRef<Map<string, ReactNode>>(new Map());
+  const hostRef = useRef<View>(null);
+  const [updateCounter, forceUpdate] = useReducer((x: number) => x + 1, 0);
+  const pendingUpdateRef = useRef<any>(null);
+
+  const register = useCallback((id: string, content: ReactNode) => {
+    portalsRef.current.set(id, content);
+    forceUpdate(); // Trigger re-render to show new content
+  }, []);
+
+  const unregister = useCallback((id: string, immediate = false) => {
+    const hasItem = portalsRef.current.has(id);
+    if (!hasItem) return; // Already removed
+
+    portalsRef.current.delete(id);
+
+    // Clear any pending updates
+    if (pendingUpdateRef.current) {
+      clearTimeout(pendingUpdateRef.current);
+      pendingUpdateRef.current = null;
+    }
+
+    if (immediate) {
+      forceUpdate();
+    } else {
+      // Debounce normal updates to avoid excessive re-renders
+      pendingUpdateRef.current = setTimeout(() => {
+        forceUpdate();
+        pendingUpdateRef.current = null;
+      }, 0) as unknown as NodeJS.Timeout;
+    }
+  }, []);
+
+  const value = useMemo(
+    () => ({ register, unregister, portals: portalsRef.current, hostRef }),
+    [register, unregister, updateCounter], // Include updateCounter to refresh context
+  );
+
+  return (
+    <TooltipPortalContext.Provider value={value}>
+      {children}
+    </TooltipPortalContext.Provider>
+  );
+};
+
+export const TooltipPortalHost: React.FC = () => {
+  const context = useContext(TooltipPortalContext);
+
+  if (!context) {
+    if (__DEV__) {
+      console.warn(
+        'TooltipPortalHost must be used within TooltipPortalProvider',
+      );
+    }
+    return null;
+  }
+
+  const { portals, hostRef } = context;
+
+  return (
+    <View ref={hostRef} style={styles.hostContainer} pointerEvents="box-none">
+      {Array.from(portals.entries()).map(([id, content]) => (
+        <React.Fragment key={id}>{content}</React.Fragment>
+      ))}
+    </View>
+  );
+};
+
+export const useTooltipPortal = () => {
+  const context = useContext(TooltipPortalContext);
+
+  if (!context) {
+    if (__DEV__) {
+      console.warn(
+        'useTooltipPortal must be used within TooltipPortalProvider. Tooltips may not appear correctly.',
+      );
+    }
+    // Return no-op functions if context is missing
+    return {
+      register: () => {},
+      unregister: () => {},
+      hostRef: null,
+    };
+  }
+
+  return context;
+};
+
+const styles = StyleSheet.create({
+  hostContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 9999,
+  },
+});

package/Application/index.ts

@@ -17,6 +17,7 @@ import { exportHeaderTitle, setAutomationID, useComponentId } from './utils';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
 import ScaleSizeProvider from './ScaleSizeProvider';
+import { useTooltipPortal } from './TooltipPortal';
 
 export {
   NavigationContainer,
@@ -29,4 +30,5 @@ export {
   Navigator,
   exportHeaderTitle,
   ScaleSizeProvider,
+  useTooltipPortal,
 };

package/Input/Input.tsx

@@ -194,7 +194,7 @@ const Input = forwardRef(
                   color: textColor,
                   fontFamily: exportFontFamily(fontWeight ?? 'regular'),
                 },
-                secure && haveValue && { fontSize: scaledFontSize },
+                secure && haveValue && { fontSize: size === 'small' ? 18 : 22 },
               ]}
               defaultValue={defaultValue}
               allowFontScaling={false}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.155.1-ds365.1",
+    "version": "0.156.1-alpha.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},