Merge pull request #5533 from GeekyAnts/release/3.4.21

release 3.4.21

example/storybook/stories/components/Wrapper.tsx

@@ -123,7 +123,7 @@ function MyWrapper({ children }: any) {
       bg={bgColor}
       safeAreaY
     >
-      {/* <Tooltip
+      <Tooltip
         label={colorMode === 'dark' ? 'Enable light mode' : 'Enable dark mode'}
         placement="bottom right"
         openDelay={300}
@@ -138,7 +138,7 @@ function MyWrapper({ children }: any) {
           icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}
           size="lg"
         />
-      </Tooltip> */}
+      </Tooltip>
       {children}
     </Box>
   );

example/storybook/stories/components/primitives/Input/Addons.tsx

@@ -10,8 +10,8 @@ import {
 
 export const Example = () => {
   return (
-    <Stack alignItems="center">
-      <InputGroup w={{ base: '70%', md: '285' }}>
+    <Stack>
+      <InputGroup w={{ base: '70%', md: '285' }} justifyContent="center">
         <InputLeftAddon children={'https://'} />
         <Input w={{ base: '70%', md: '100%' }} placeholder="nativebase" />
         <InputRightAddon children={'.io'} />

example/storybook/stories/components/primitives/Select/FormControlled.tsx

@@ -10,7 +10,7 @@ import {
 export const Example = () => {
   return (
     <Center>
-      <FormControl w="3/4" maxW="300" isRequired isInvalid>
+      <FormControl maxW="300" isRequired isInvalid>
         <FormControl.Label>Choose service</FormControl.Label>
         <Select
           minWidth="200"

example/storybook/stories/components/primitives/Select/SelectLongList.tsx

@@ -54,11 +54,11 @@ export const Example = () => {
   ];
   return (
     <Container>
-      <FormControl>
+      <FormControl maxW="300">
         <FormControl.Label>Select Color</FormControl.Label>
         <Select
           selectedValue={value}
-          minWidth="100"
+          minWidth="200"
           accessibilityLabel="Select a Color"
           placeholder="Select a Color"
           onValueChange={(itemValue) => {

package.json

@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.20",
+  "version": "3.4.21",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

src/components/composites/Avatar/Group.tsx

@@ -22,7 +22,6 @@ const getAvatarGroupChildren = (
     plusAvatars = childrenArray.length - max;
     childrenArray = childrenArray.slice(0, max);
   }
-  const trailingChildren = childrenArray.slice(1);
   const spacingProps = {
     ml: isVertical ? 0 : space,
     mt: isVertical ? space : 0,
@@ -38,29 +37,18 @@ const getAvatarGroupChildren = (
         {'+ ' + plusAvatars}
       </Avatar>
     ) : null,
-    React.Children.map(
-      trailingChildren.reverse(),
-      (child: any, index: number) => {
-        return React.cloneElement(
-          child,
-          {
-            key: `avatar-group-child-${index}`,
-            ..._avatar,
-            ...spacingProps,
-            ...child.props,
-          },
-          child.props.children
-        );
-      }
-    ),
-    React.cloneElement(
-      childrenArray[0],
-      {
-        ..._avatar,
-        ...childrenArray[0].props,
-      },
-      childrenArray[0].props.children
-    ),
+    React.Children.map(childrenArray.reverse(), (child: any, index: number) => {
+      return React.cloneElement(
+        child,
+        {
+          key: `avatar-group-child-${index}`,
+          ..._avatar,
+          ...spacingProps,
+          ...child.props,
+        },
+        child.props.children
+      );
+    }),
   ];
 };
 

src/components/composites/Popover/Popover.tsx

@@ -27,6 +27,7 @@ const Popover = (
     finalFocusRef,
     useRNModal,
     trapFocus = true,
+    _backdrop,
     ...props
   }: IPopoverProps,
   ref: any
@@ -101,7 +102,7 @@ const Popover = (
           style={StyleSheet.absoluteFill}
         >
           <Popper onClose={handleClose} triggerRef={triggerRef} {...props}>
-            <Backdrop onPress={handleClose} bg="transparent" />
+            <Backdrop onPress={handleClose} bg="transparent" {..._backdrop} />
             <PopoverContext.Provider
               value={{
                 onClose: handleClose,

src/components/composites/Popover/types.ts

@@ -103,6 +103,10 @@ export interface InterfacePopoverProps {
    * @default false
    */
   useRNModal?: boolean;
+  /**
+   * Props applied on backdrop.
+   */
+  _backdrop?: any;
 }
 
 export type IPopoverContentImpl = {

src/factory/component.tsx

@@ -9,11 +9,12 @@ export default function Factory<P>(
   componentTheme?: ComponentTheme
 ) {
   return React.forwardRef(
-    ({ children, ...props }: P & FactoryComponentProps, ref: any) => {
+    ({ children, _state, ...props }: P & FactoryComponentProps, ref: any) => {
       const StyledComponent = useMemo(() => makeStyledComponent(Component), []);
       const calculatedProps = usePropsWithComponentTheme(
         componentTheme ?? {},
-        props
+        props,
+        _state
       );
       return (
         <StyledComponent {...(calculatedProps as P)} ref={ref}>

src/factory/types.ts

@@ -1,7 +1,9 @@
 import type { PlatformProps } from '../components/types';
 import type { StyledProps } from '../theme/types';
+import type { IStateProps } from '../hooks/useThemeProps/propsFlattener';
 
 export type FactoryComponentProps = StyledProps &
   PlatformProps<StyledProps> & {
     children?: string | JSX.Element | JSX.Element[];
+    _state?: IStateProps;
   };

src/hooks/useThemeProps/usePropsWithComponentTheme.ts

@@ -1,9 +1,15 @@
 import { usePropsResolutionWithComponentTheme } from './usePropsResolution';
 import type { ComponentTheme } from '../../theme';
+import type { IStateProps } from './propsFlattener';
 
 export function usePropsWithComponentTheme(
   localTheme: ComponentTheme,
-  propsReceived: any
+  propsReceived: any,
+  _state?: IStateProps
 ) {
-  return usePropsResolutionWithComponentTheme(localTheme, propsReceived);
+  return usePropsResolutionWithComponentTheme(
+    localTheme,
+    propsReceived,
+    _state
+  );
 }

src/theme/components/actionsheet.ts

@@ -15,6 +15,9 @@ export const ActionsheetContent = {
     py: 2,
     borderRadius: 'none',
     roundedTop: 20,
+    _web: {
+      userSelect: 'none',
+    },
     _dragIndicator: {
       height: 1,
       width: 10,

src/theme/styled-system.ts

@@ -114,6 +114,7 @@ export const flexbox = {
   flexDirection: true,
   flexDir: {
     property: 'flexDirection',
+    scale: 'flexDirection',
   },
   // item
   flex: true,