react-native-molecules 0.5.0-beta.33 → 0.5.0-beta.35

package/components/Menu/Menu.tsx

@@ -1,9 +1,11 @@
 import {
     Children,
     cloneElement,
+    type Dispatch,
     memo,
     type ReactElement,
     type ReactNode,
+    type SetStateAction,
     useCallback,
     useContext,
     useMemo,
@@ -92,24 +94,38 @@ const Menu = ({
     );
 };
 
-export type MenuRootProps = {
-    children: ReactNode;
+type UncontrolledMenuRootProps = {
+    isOpen?: never;
+    setIsOpen?: never;
 };
 
-export const MenuRoot = memo(({ children }: MenuRootProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const triggerRef = useRef(null);
-
-    const onOpen = useCallback(() => setIsOpen(true), []);
-    const onClose = useCallback(() => setIsOpen(false), []);
-
-    const contextValue = useMemo(
-        () => ({ isOpen, onOpen, onClose, triggerRef }),
-        [isOpen, onOpen, onClose],
-    );
+type ControlledMenuRootProps = {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+};
 
-    return <MenuRootContext.Provider value={contextValue}>{children}</MenuRootContext.Provider>;
-});
+export type MenuRootProps = {
+    children: ReactNode;
+} & (UncontrolledMenuRootProps | ControlledMenuRootProps);
+
+export const MenuRoot = memo(
+    ({ children, isOpen: isOpenProp, setIsOpen: setIsOpenProp }: MenuRootProps) => {
+        const [internalIsOpen, setInternalIsOpen] = useState(false);
+        const triggerRef = useRef(null);
+        const isOpen = isOpenProp ?? internalIsOpen;
+        const setIsOpen = setIsOpenProp ?? setInternalIsOpen;
+
+        const onOpen = useCallback(() => setIsOpen(true), [setIsOpen]);
+        const onClose = useCallback(() => setIsOpen(false), [setIsOpen]);
+
+        const contextValue = useMemo(
+            () => ({ isOpen, onOpen, onClose, triggerRef }),
+            [isOpen, onOpen, onClose],
+        );
+
+        return <MenuRootContext.Provider value={contextValue}>{children}</MenuRootContext.Provider>;
+    },
+);
 
 MenuRoot.displayName = 'Menu_Root';
 

package/components/Menu/utils.ts

@@ -3,6 +3,7 @@ import type { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
+import { registerPortalContext } from '../Portal';
 
 export const MenuContext = createContext({
     closeOnSelect: true,
@@ -39,3 +40,5 @@ const menuStylesDefault = StyleSheet.create(theme => ({
 }));
 
 export const menuStyles = getRegisteredComponentStylesWithFallback('Menu', menuStylesDefault);
+
+registerPortalContext([MenuRootContext, MenuContext]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-molecules",
-  "version": "0.5.0-beta.33",
+  "version": "0.5.0-beta.35",
   "author": "Thet Aung <thetaung.dev@gmail.com>",
   "license": "MIT",
   "main": "index.ts",