Merge pull request #5598 from GeekyAnts/release/3.4.26

Release/3.4.26

package.json

@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.25",
+  "version": "3.4.26",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",
@@ -64,10 +64,11 @@
     "@types/lodash.omit": "^4.5.6",
     "@types/lodash.omitby": "^4.6.6",
     "@types/lodash.pick": "^4.4.6",
+    "@types/lodash.uniqueid": "^4.0.7",
     "@types/react": "^16.9.19",
     "@types/react-native": "~0.63.2",
     "@types/tinycolor2": "^1.4.2",
-    "@types/use-subscription": "^1.0.0",
+    "@types/use-sync-external-store": "^0.0.3",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "commitlint": "^8.3.5",
     "eslint": "^7.10.0",
@@ -183,7 +184,7 @@
     "@react-native-aria/focus": "^0.2.6",
     "@react-native-aria/interactions": "^0.2.2",
     "@react-native-aria/listbox": "^0.2.4-alpha.3",
-    "@react-native-aria/overlays": "0.3.3-rc.0",
+    "@react-native-aria/overlays": "^0.3.3",
     "@react-native-aria/radio": "^0.2.4",
     "@react-native-aria/slider": "^0.2.5-alpha.1",
     "@react-native-aria/tabs": "^0.2.7",
@@ -207,9 +208,10 @@
     "lodash.omit": "^4.5.0",
     "lodash.omitby": "^4.6.0",
     "lodash.pick": "^4.4.0",
+    "lodash.uniqueid": "^4.0.1",
     "stable-hash": "^0.0.2",
     "tinycolor2": "^1.4.2",
-    "use-subscription": "^1.8.0"
+    "use-sync-external-store": "^1.2.0"
   },
   "directories": {
     "example": "example",

src/components/composites/AlertDialog/AlertDialog.tsx

@@ -37,6 +37,7 @@ const AlertDialog = (
     _backdropFade,
     _fade,
     _slide,
+    _overlay,
     useRNModal,
     ...restThemeProps
   } = usePropsResolution('AlertDialog', rest);
@@ -65,14 +66,15 @@ const AlertDialog = (
   if (useHasResponsiveProps(rest)) {
     return null;
   }
+
   return (
     <Overlay
       isOpen={visible}
       onRequestClose={handleClose}
       isKeyboardDismissable={isKeyboardDismissable}
       useRNModalOnAndroid
       useRNModal={useRNModal}
-      unmountOnExit
+      {..._overlay}
     >
       <AlertDialogContext.Provider
         value={{

src/components/composites/FormControl/useFormControl.tsx

@@ -4,7 +4,7 @@ import omit from 'lodash.omit';
 import type { IFormControlProps } from './types';
 import { ariaAttr } from '../../../utils';
 import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash.uniqueid';
 
 export type IFormControlContext = Omit<
   ReturnType<typeof useFormControlProvider>,

src/components/composites/Menu/Menu.tsx

@@ -77,6 +77,7 @@ const Menu = (
   if (useHasResponsiveProps(resolvedProps)) {
     return null;
   }
+
   return (
     <>
       {updatedTrigger()}
@@ -86,7 +87,6 @@ const Menu = (
         useRNModalOnAndroid
         useRNModal={useRNModal}
         {..._overlay}
-        unmountOnExit
       >
         <PresenceTransition visible={isOpen} {..._presenceTransition}>
           <Popper

src/components/composites/Menu/useMenu.tsx

@@ -3,7 +3,7 @@ import { useFocusManager } from '@react-native-aria/focus';
 import { useId } from '@react-native-aria/utils';
 import { AccessibilityRole, Platform } from 'react-native';
 import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash.uniqueid';
 
 type IMenuTriggerProps = {
   handleOpen: () => void;

src/components/composites/Modal/Modal.tsx

@@ -77,7 +77,7 @@ const Modal = (
   if (useHasResponsiveProps(rest)) {
     return null;
   }
-  // console.log('visible here', visible);
+
   return (
     <Overlay
       isOpen={visible}

src/components/composites/Popover/Popover.tsx

@@ -12,8 +12,9 @@ import { StyleSheet } from 'react-native';
 import { useId } from '@react-native-aria/utils';
 import { Overlay } from '../../primitives/Overlay';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash.uniqueid';
 import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
 
 const Popover = (
   {
@@ -32,6 +33,8 @@ const Popover = (
   }: IPopoverProps,
   ref: any
 ) => {
+  const { _overlay } = usePropsResolution('Popover', props);
+
   const triggerRef = React.useRef(null);
   const mergedRef = mergeRefs([triggerRef]);
   const [isOpen, setIsOpen] = useControllableState({
@@ -92,7 +95,7 @@ const Popover = (
         onRequestClose={handleClose}
         useRNModalOnAndroid
         useRNModal={useRNModal}
-        unmountOnExit
+        {..._overlay}
       >
         <PresenceTransition
           initial={{ opacity: 0 }}

src/components/composites/Popover/types.ts

@@ -107,6 +107,10 @@ export interface InterfacePopoverProps {
    * Props applied on backdrop.
    */
   _backdrop?: any;
+  /**
+   * Props applied on overlay.
+   */
+  _overlay?: any;
 }
 
 export type IPopoverContentImpl = {

src/components/composites/Tooltip/Tooltip.tsx

@@ -10,7 +10,7 @@ import Box from '../../primitives/Box';
 import type { ITooltipProps } from './types';
 import { useId } from '@react-native-aria/utils';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash.uniqueid';
 import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
 
 export const Tooltip = ({

src/components/primitives/Hidden/HiddenSSR.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useTheme } from 'native-base';
+import { Platform } from 'react-native';
+import type { IHiddenProps } from './types';
+import { useColorMode } from '../../../core/color-mode/hooks';
+
+export const HiddenSSR = React.memo(({ children, ...props }: IHiddenProps) => {
+  const theme = useTheme();
+  const breakPoints = Object.keys(theme.breakpoints);
+  const currentColorMode = useColorMode();
+
+  const { from, till, only, colorMode, platform } = props;
+
+  if (children === null) return null;
+  if (!from && !till && !only && !colorMode && !platform) {
+    return null;
+  } else if (
+    (Array.isArray(platform) && platform.includes(Platform.OS)) ||
+    platform === Platform.OS
+  ) {
+    return null;
+  } else if (colorMode === currentColorMode.colorMode) {
+    return null;
+  }
+  const display: any = {};
+
+  if (till) {
+    let flag = false;
+    for (const i in breakPoints) {
+      if (breakPoints[i] === till) {
+        display[breakPoints[i]] = 'flex';
+        flag = true;
+      } else {
+        display[breakPoints[i]] = flag ? 'flex' : 'none';
+      }
+    }
+  }
+
+  if (from) {
+    let flag = false;
+    for (const i in breakPoints) {
+      if (breakPoints[i] === from || flag) {
+        display[breakPoints[i]] = 'none';
+        flag = true;
+      } else {
+        display[breakPoints[i]] = 'flex';
+      }
+    }
+  }
+  if (only) {
+    if (Array.isArray(only)) {
+      for (const i in breakPoints) {
+        if (only.includes(breakPoints[i])) {
+          display[breakPoints[i]] = 'none';
+        } else {
+          display[breakPoints[i]] = 'flex';
+        }
+      }
+    } else {
+      display[only] = 'none';
+    }
+  }
+
+  return React.cloneElement(children, {
+    display: display,
+  });
+});

src/components/primitives/Hidden/index.tsx

@@ -1,12 +1,21 @@
+import React from 'react';
 import { memo } from 'react';
 import type { IHiddenProps } from './types';
 import { usePropsResolution } from '../../../hooks/useThemeProps';
 import { useBreakpointValue, useTheme, useToken } from '../../../hooks';
 import { useColorMode } from '../../../core/color-mode/hooks';
 import { Platform } from 'react-native';
-
-export function Hidden({ children, ...props }: IHiddenProps) {
-  const { from, till, only, platform, colorMode } = usePropsResolution(
+import { useNativeBaseConfig } from '../../../core/NativeBaseContext';
+import { HiddenSSR } from './HiddenSSR';
+export function Hidden({ isSSR, ...props }: IHiddenProps) {
+  const {
+    from,
+    till,
+    only,
+    platform,
+    colorMode,
+    children,
+  } = usePropsResolution(
     'Hidden',
     props,
     {},
@@ -28,7 +37,9 @@ export function Hidden({ children, ...props }: IHiddenProps) {
   const [currentBreakpointValue] = useToken('breakpoints', [breakpointValue]);
   const [fromBreakPointValue] = useToken('breakpoints', [from]);
   const [tillBreakPointValue] = useToken('breakpoints', [till]);
+  const isSSRProvider = useNativeBaseConfig('useBreakpointResolvedProps').isSSR;
 
+  if (isSSR && isSSRProvider) return <HiddenSSR {...props} />;
   //if no prop is passed, it will hide the element wrapped with hidden
   if (!from && !till && !only && !colorMode && !platform) {
     return null;

src/components/primitives/Hidden/types.ts

@@ -30,6 +30,10 @@ export interface InterfaceHiddenProps {
    *
    */
   children: React.ReactElement | null;
+  /**
+   *
+   */
+  isSSR?: boolean;
 }
 
 export type IHiddenProps = InterfaceHiddenProps;

src/core/NativeBaseProvider.tsx

@@ -91,7 +91,7 @@ const NativeBaseProvider = (props: NativeBaseProviderProps) => {
             colorModeManager={colorModeManager}
             options={theme.config}
           >
-            <OverlayProvider>
+            <OverlayProvider isSSR>
               <ToastProvider>
                 <InitializeToastRef />
                 <SSRProvider>{children}</SSRProvider>

src/core/color-mode/hooks.tsx

@@ -7,7 +7,8 @@ import type {
 import { HybridContext } from './../hybrid-overlay/Context';
 import type { IHybridContextProps } from './../hybrid-overlay/types';
 import { AppState, useColorScheme as _useColorScheme } from 'react-native';
-import { useSubscription } from 'use-subscription';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
 import { useNativeBaseConfig } from '../NativeBaseContext';
 
 export const useColorMode = (): IColorModeContextProps => {
@@ -56,7 +57,11 @@ export const useAppState = () => {
     // This if statement technically breaks the rules of hooks, but is safe
     // because the condition never changes after mounting.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useSubscription(subscription);
+    return useSyncExternalStore(
+      subscription.subscribe,
+      subscription.getCurrentValue,
+      subscription.getCurrentValue
+    );
   }
 };
 
@@ -100,7 +105,7 @@ export function useModeManager(
   useEffect(() => {
     if (colorModeManager) {
       (async function getMode() {
-        let value = await colorModeManager.get(initialColorMode);
+        const value = await colorModeManager.get(initialColorMode);
         if (value && value !== colorMode) {
           setRawMode(value);
         }

src/theme/components/alert-dialog.ts

@@ -48,6 +48,9 @@ export const AlertDialog = {
     _backdropFade: { exitDuration: 150, entryDuration: 200 },
     _fade: { exitDuration: 100, entryDuration: 200 },
     _slide: { duration: 200, overlay: false },
+    _overlay: {
+      unmountOnExit: true,
+    },
   },
   sizes,
   defaultProps: {

src/theme/components/input.ts

@@ -42,6 +42,16 @@ const baseStyle = (props: InterfaceInputProps & { theme: any }) => {
     _hover: {
       borderColor: 'primary.600',
     },
+    _invalid: {
+      borderColor: 'error.600',
+      _hover: { borderColor: 'error.600' },
+      _stack: {
+        style: {
+          outlineWidth: '0',
+          boxShadow: `0 0 0 1px ${error[600]}`,
+        },
+      },
+    },
     _focus: {
       borderColor: 'primary.600',
       _hover: { borderColor: 'primary.600' },

src/theme/components/menu.ts

@@ -18,7 +18,9 @@ const baseStyle = {
     exit: { opacity: 0, transition: { duration: 150 } },
     style: StyleSheet.absoluteFill,
   },
-  _overlay: {},
+  _overlay: {
+    unmountOnExit: true,
+  },
   _backdrop: {
     bg: 'transparent',
   },

src/theme/components/popover.ts

@@ -1,3 +1,11 @@
+export const Popover = {
+  baseStyle: () => ({
+    _overlay: {
+      unmountOnExit: true,
+    },
+  }),
+};
+
 export const PopoverCloseButton = {
   baseStyle: () => ({
     position: 'absolute',