@fto-consult/expo-ui 6.25.3 → 6.26.1

package/babel.config.alias.js

@@ -83,7 +83,7 @@ module.exports = (opts)=>{
     const outputPath = path.resolve(HelpScreen,"openLibraries.js");
     r.$nodeModulesPath = r.$enodeModulesPath= nodeModulesPath;
     require("./find-licenses")({
-        paths : [root,r["$expo-ui-root-path",path.resolve(process.cwd())]],
+        paths : [root,r["$expo-ui-root-path"],path.resolve(process.cwd())],
         nodeModulesPath : nodeModulesPath,
         outputPath
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.25.3",
+  "version": "6.26.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -67,7 +67,7 @@
     "@emotion/react": "^11.11.1",
     "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.28.1",
+    "@fto-consult/common": "^3.28.4",
     "@gorhom/portal": "^1.0.14",
     "@pchmn/expo-material3-theme": "^1.3.1",
     "@react-native-async-storage/async-storage": "1.18.2",

package/src/App.js

@@ -3,9 +3,6 @@ import React from 'react';
 import {SWRConfig} from "$swr";
 import Index from './index';
 import notify  from "$notify";
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import {GestureHandlerRootView} from "react-native-gesture-handler";
-import KeyboardAvoidingViewComponent from '$ecomponents/KeyboardAvoidingView';
 import APP from "$app";
 import {isMobileNative} from "$cplatform";
 import {setDeviceIdRef} from "$capp";
@@ -144,13 +141,7 @@ export default function getIndex({onMount,onUnmount,render,onRender,init}){
           }
         }}
       >
-        <GestureHandlerRootView style={{ flex: 1,flexGrow:1,flexShrink:1}} testID={"RN_GestureHandlerRootView"}>
-          <KeyboardAvoidingViewComponent testID={"RN_AppKeyboardAvoidingView"}>
-            <SafeAreaProvider testID={"RN_AppSafeAreaProvider"}>
-              <Index onMount={onMount} render={render} onUnmount={onUnmount} onRender={onRender} init={init}/>
-            </SafeAreaProvider>
-          </KeyboardAvoidingViewComponent>
-        </GestureHandlerRootView>
+       <Index onMount={onMount} render={render} onUnmount={onUnmount} onRender={onRender} init={init}/>
       </SWRConfig>
     );
 };

package/src/components/Datagrid/Accordion/Row.js

@@ -64,7 +64,6 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
     let rowIndex = defaultDecimal(index);
     let rowIndexCount = index+1;
     const testID = defaultStr(props.testID,"RN_DatagridAccordionRow"+(rowKey||rowIndex))
-    let _rP = {}
     const hasAvatar = React.isValidElement(avatarContent);
     const handleRowToggle = (event)=>{
         if(selectable === false) return;
@@ -75,8 +74,8 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
     }
     const wrapStyle = React.useMemo(()=>{
         return getRowStyle({row:item,index,selected,numColumns,isAccordion:true,rowIndex:index});
-    },[selected])
-    let viewWrapperStyle = {};
+    },[selected,numColumns]);
+    const viewWrapperStyle = [];
     if(selected) {
         const handleAvatarRowToggle = (event)=>{
             React.stopEventPropagation(event);
@@ -93,7 +92,8 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
             title = {sTtitle}
         ></Avatar> : null;
         if(!hasAvatar){
-            viewWrapperStyle = [styles.hasNotAvatar,{borderLeftColor:theme.colors.primaryOnSurface}]
+            viewWrapperStyle.push(styles.hasNotAvatar);
+            viewWrapperStyle.push({borderLeftColor:theme.colors.primaryOnSurface})
         }
     }
 
@@ -105,26 +105,24 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
                 icon = {"information-outline"}
             ></Avatar>
         }
-    } else if(selectable === false){
-        _rP.disabled = true;
     } 
     right = typeof right === 'function'? right ({color:theme.colors.primaryOnSurface,selectable:true,style:[rStyles.lineHeight,styles.right]}) : right;
     const swipeableRef = React.useRef(null);
     return  <Pressable
-                {..._rP}    
+                disabled = {selectable===false?true : false}
                 {...rowProps}
                 testID={testID}
                 children = {null}
                 onPress = {toggleExpander}
                 onLongPress={handleRowToggle}
                 style = {[
-                    _rP.style,rowProps.style,
                     styles.container,
-                    numColumns > 1 && {width:'99%'},
                     styles.bordered,
-                    wrapperStyle,
                     wrapStyle,
-                    style,
+                    rowProps.style,
+                    numColumns > 1 && styles.multiColumns,
+                    selected && styles.selected,
+                    //style,
                 ]}
                 ref = {React.useMergeRefs(ref,innerRef)}
         >
@@ -221,11 +219,17 @@ const styles = StyleSheet.create({
     bordered : {
         //borderColor: "#ced4da",
         //borderWidth : 1,
+        //paddingHorizontal:10,
+    },
+    multiColumns : {
+        paddingHorizontal : 5,
+        width : "98%"
     },
     renderedContent : {
         flexDirection : 'row',
         alignItems : 'center',
-        justifyContent : 'center'
+        justifyContent : 'center',
+        paddingVertical : 10,
     },
     right : {
         marginHorizontal : 0,
@@ -244,25 +248,25 @@ const styles = StyleSheet.create({
         alignSelf : 'flex-start',
     },
     container : {
-        marginVertical : 10,
-        paddingVertical : 5,
-        paddingHorizontal : isMobileNative()? 10 : 0,
+        paddingVertical : 0,
+        paddingHorizontal : 0,
         marginHorizontal : 5,
         flexWrap : 'nowrap',
         justifyContent : 'center',
         width : '100%',
     },
-    containerSelected : {
-        paddingLeft : 2,
-    },
     avatarContent : {
         marginRight : 5,
     },
     hasNotAvatar : {
         borderLeftWidth : 5,
-        paddingLeft : 2,
+        paddingLeft : 0,
         height : "100%"
-    }
+    },
+    selected : {
+        paddingHorizontal : 0,
+        paddingVertical : 0,
+    },
 });
 
 DatagridAccordionRow.displayName = 'DatagridAccordionRow';

package/src/components/Datagrid/Accordion/index.js

@@ -23,7 +23,7 @@ import RenderType from "../RenderType";
 import { flatMode} from "$ecomponents/TextField";
 import List from "$ecomponents/Table/List";
 import theme,{Colors} from "$theme";
-import {getRowStyle,styles as rStyles} from "../utils";
+import {styles as rStyles} from "../utils";
 import Avatar from "$ecomponents/Avatar";
 import {defaultObj,isOb,isNonNullString} from "$cutils";
 import PropTypes from "prop-types";
@@ -94,13 +94,10 @@ const DatagridFactory = (Factory)=>{
             const formatValue = this.formatValue.bind(this);
             return {...this.getActionsArgs(),valueFormatter:formatValue,formatValue,abreviateValues:this.state.abreviateValues,row:item,items:this.state.data,item,rowData:item,index,rowIndex:index,rowCounterIndex:rowIndexCount,rowIndexCount};
         }
-        getRenderingItemProps ({item,rowKey,numColumns,index}){
+        getRenderingItemProps ({item,rowKey,index}){
             this.renderingItemsProps = isObj(this.renderingItemsProps)? this.renderingItemsProps : {};
-            const wrapperStyle = getRowStyle({row:item,index,numColumns,isAccordion:true,rowIndex:index});
             if(this.renderingItemsProps[rowKey]){
-                const it = this.renderingItemsProps[rowKey];
-                it.wrapperStyle = wrapperStyle;
-                return it;
+                return this.renderingItemsProps[rowKey];
             }
             const callArgs = this.getItemCallArgs({item,index});
             const accordion = this.props.accordion;
@@ -169,7 +166,7 @@ const DatagridFactory = (Factory)=>{
             }
             this.renderingItemsProps[rowKey] = {
                 testID,
-                wrapperStyle,title,right,rightProps,description,avatarContent,rowProps,avatarProps,
+                title,right,rightProps,description,avatarContent,rowProps,avatarProps,
                 bottomSheetTitlePrefix : defaultStr(renderedContent?.bottomSheetTitlePrefix,accordionProps.bottomSheetTitlePrefix,accordion?.bottomSheetTitlePrefix)
             }
             return this.renderingItemsProps[rowKey];
@@ -200,8 +197,8 @@ const DatagridFactory = (Factory)=>{
                 selectable = {this.props.selectable}
                 {...defaultObj(this.props.accordionProps)}
                 accordion = {this.props.accordion}
+                {...this.getRenderingItemProps({item,index,rowKey})}
                 numColumns = {numColumns}
-                {...this.getRenderingItemProps({item,numColumns,index,rowKey})}
                 key = {index}
                 ref = {(el)=>{
                     if(isObj(this.renderingItemsProps) && isObj(this.renderingItemsProps[rowKey]) ){

package/src/components/Datagrid/Actions/index.js

@@ -16,7 +16,7 @@ export default function DatagridActions ({actions,actionProps,...props}){
   const selectedRowsCount = useGetSelectedRowsCount();
   useWindowDimensions();
   const selected = !!selectedRowsCount;
-  actions = selected ? context?.renderSelectedRowsActions.call(context,actions) : actions;
+  actions = selected ? context?.renderSelectedRowsActions.call(context,{}) : actions;
   if(selected){
     actionProps = Object.assign({},actionProps);
     actionProps.style = Object.assign({},StyleSheet.flatten(actionProps.style));

package/src/components/Datagrid/Common/Common.js

@@ -3560,7 +3560,8 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     isAllRowsSelected(){
         const count = this.getSelectedRowsCount() - this.getSectionListDataSize();
-        return count >=0 && count >= this.getMaxSelectableRows()? true : false;
+        if(count <= 0) return false;
+        return count >= this.getMaxSelectableRows();
     }
     getDefaultPaginationRowsPerPageItems (){
         return [5,10,15,20,25,30,40,50,60,80,100];

package/src/components/Datagrid/utils.js

@@ -103,6 +103,8 @@ export const ROW_SELECTED_STYLE = {
     }
 }
 
+export const SELECTED_BORDER_COLOR = "rgb(251, 207, 232)";
+
 export const ROW_BORDER_STYLE = {
     marginHorizontal : 0,
     marginVertical : 0,
@@ -171,7 +173,9 @@ export const getRowStyle = ({row,bordered,numColumns,rowData,isAccordion,isTable
         style.push(rowIndex%2===0?styles.even : theme.isDark()?styles.oddDark : styles.odd)
     }
     if(selected){
-        style.push(styles.selected,{borderBottomWidth:1,borderBottomColor:theme.colors.primary})
+        //const selectedBcolor = theme.isDark()? SELECTED_BORDER_COLOR : theme.colors.primary;
+        //const bordered = null;//isAccordion ? null : {borderBottomWidth:1,borderBottomColor:selectedBcolor,borderTopWidth:1,borderTopColor:selectedBcolor};
+        style.push(styles.selected);
     }
     if(paid || row.paid){
         style.push(styles.paid);

package/src/components/Drawer/DrawerItems/index.js

@@ -6,12 +6,13 @@ import DrawerSection from "./DrawerSection"
 import PropTypes from "prop-types";
 import Divider from "$ecomponents/Divider";
 import View from "$ecomponents/View";
+import Auth from "$cauth";
+import { useDrawer } from '../Provider';
 
 export * from "./utils";
 
 const DrawerItemsComponent = React.forwardRef((props,ref)=> {
   let {items:_items,minimized} = props;
-  const hasAuth = typeof window.Auth !=='undefined' && Auth && Auth.isAllowedFromStr ? true : false;
   _items = typeof _items ==='function'? _items(props) : _items;
   if(React.isValidElement(_items)){
      return _items;
@@ -19,7 +20,7 @@ const DrawerItemsComponent = React.forwardRef((props,ref)=> {
   const r = React.useMemo(()=>{
     let items = []
     const renderExpandableOrSection = ({item,key,items})=>{
-          if(hasAuth && isNonNullString(item.perm) && !Auth.isAllowedFromStr(item.perm)) return null;
+          if(isNonNullString(item.perm) && !Auth.isAllowedFromStr(item.perm)) return null;
           const {section,items:itx2,...rest} = item;
           if(section){
             return <DrawerSection 
@@ -53,7 +54,7 @@ const DrawerItemsComponent = React.forwardRef((props,ref)=> {
           Object.map(item.items,(it,j)=>{
               if(!isObj(it)) return ;
               getDefaultProps(it);
-              const r = renderItem({minimized,hasAuth,renderExpandableOrSection,items:item.items,item:it,key:i+j,props});
+              const r = renderItem({minimized,renderExpandableOrSection,items:item.items,item:it,key:i+j,props});
               if(r){
                 itx.push(r);
               }
@@ -65,7 +66,7 @@ const DrawerItemsComponent = React.forwardRef((props,ref)=> {
               }
           }
       } else {
-          const r = renderItem({minimized,hasAuth,renderExpandableOrSection,items:_items,item,key:i+"",props});
+          const r = renderItem({minimized,renderExpandableOrSection,items:_items,item,key:i+"",props});
           if(r){
             items.push(r);
           }
@@ -120,14 +121,14 @@ const getDefaultProps = function(item){
   return item;
 }
 
-const renderItem = ({item,minimized,hasAuth,renderExpandableOrSection,index,key})=>{
+const renderItem = ({item,minimized,renderExpandableOrSection,index,key})=>{
   key = key||index;
   if(React.isValidElement(item)){
     return <React.Fragment key={key}>
         {item}
     </React.Fragment>
   } else {
-    if(hasAuth && isNonNullString(item.perm) && !Auth.isAllowedFromStr(item.perm)) return null;
+    if(isNonNullString(item.perm) && !Auth.isAllowedFromStr(item.perm)) return null;
     if(!item.label && !item.text && !item.icon) {
         if(item.divider === true){
           const {divider,...rest} = item;

package/src/components/ErrorBoundary/index.js

@@ -46,7 +46,6 @@ class ErrorBoundary extends React.Component {
         )
       }
     }
-
     return this.props.children
   }
 }

package/src/components/List/Common.js

@@ -9,22 +9,15 @@ import BackToTop from "$ecomponents/BackToTop";
 import {FlatList,StyleSheet,View} from "react-native";
 import Label from "$ecomponents/Label";
 import { useWindowDimensions,Dimensions } from "react-native";
-import { useList } from "./hooks";
+import { useList,useGetNumColumns } from "./hooks";
 
 const CommonListComponent = React.forwardRef((props,ref)=>{
     const context = useList(props);
-    let {responsive,testID,defaultItemHeight,itemHeight,windowWidth,onRender,componentProps,columnWrapperStyle,onViewableItemsChanged,withFlatListItem,Component,withBackToTop,backToTopRef:customBackToTopRef,withBackToTopButton,onScroll,onScrollEnd,onMount,onUnmount,renderScrollViewWrapper,prepareItems,getItemKey,getKey,keyExtractor,items,filter,renderItem,numColumns,containerProps,bindResizeEvents,...rest} = props;
+    let {testID,defaultItemHeight,itemHeight,onRender,componentProps,columnWrapperStyle,onViewableItemsChanged,withFlatListItem,Component,withBackToTop,backToTopRef:customBackToTopRef,withBackToTopButton,onScroll,onScrollEnd,onMount,onUnmount,renderScrollViewWrapper,prepareItems,getItemKey,getKey,keyExtractor,items,filter,renderItem,numColumns,containerProps,bindResizeEvents,...rest} = props;
     withBackToTopButton = withBackToTop === true || withBackToTopButton == true || isMobileMedia()? true : false;
     rest = defaultObj(rest);
     containerProps = defaultObj(containerProps);
-    responsive = defaultBool(responsive,false);
-    const dimensions = responsive ? useWindowDimensions() : Dimensions.get("window");
-    if(responsive){
-        numColumns = grid.numColumns(windowWidth);
-    } else {
-        numColumns = defaultDecimal(numColumns,1);
-    }
-    const itemWindowWidth = dimensions.width/numColumns;
+    const {itemWindowWidth} = useGetNumColumns(props);  
     let scrollEndTimeout = React.useRef(null);
     const listRef = React.useRef(null);
     const hasCustomBackToTop = typeof customBackToTopRef == 'function'? true : false;

package/src/components/List/Virtuoso/index.js

@@ -13,6 +13,7 @@ import Dimensions from "$cdimensions";
 import { StyleSheet } from "react-native";
 import {isMobileNative} from "$cplatform";
 import {addClassName,removeClassName} from "$cutils/dom";
+import { useGetNumColumns } from "../hooks";
 
 const propTypes = {
     ...defaultObj(Virtuoso.propTypes),
@@ -32,10 +33,11 @@ const propTypes = {
     isScrolling : PropTypes.func,
 };
 /***@see : https://virtuoso.dev/virtuoso-api-reference/ */
-const VirtuosoListComponent = React.forwardRef(({onRender,id,fixedHeaderContent,rowProps,renderTable,listClassName,components,itemProps,windowWidth,numColumns,responsive,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,autoSizedStyle,...props},ref)=>{
+const VirtuosoListComponent = React.forwardRef(({onRender,id,fixedHeaderContent,numColumns:cNumCol,rowProps,renderTable,listClassName,components,itemProps,windowWidth,responsive,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,autoSizedStyle,...props},ref)=>{
     if(renderTable){
         responsive = false;
     }
+    const {numColumns} = useGetNumColumns({responsive,numColumns:cNumCol,windowWidth})
     const Component = React.useMemo(()=>renderTable ? TableVirtuoso : responsive?VirtuosoGrid:Virtuoso,[responsive,renderTable]);
     const context = useList(props);
     itemProps = defaultObj(itemProps);
@@ -162,7 +164,7 @@ const VirtuosoListComponent = React.forwardRef(({onRender,id,fixedHeaderContent,
             useWindowScroll = {false}
             totalCount = {items.length}
             itemContent = {(index)=>{
-                return renderItem({index,item:items[index],items})
+                return renderItem({index,numColumns,item:items[index],items})
             }}
             atBottomStateChange = {()=>{
                 if(typeof onEndReached =='function'){

package/src/components/List/hooks.js

@@ -1,7 +1,8 @@
 import React from "$react";
 import { prepareItems as customPrepareItems} from "./utils";
-import {defaultFunc} from "$cutils";
-
+import {defaultFunc,defaultBool,defaultDecimal} from "$cutils";
+import Dimensions,{isMobileMedia,useWindowDimensions} from "$cdimensions";
+import {grid} from "$theme";
 /**** retourne le contexte associé au composant List
     
 */
@@ -20,4 +21,16 @@ export const useList = ({items,filter,prepareItems,...props})=>{
         return r;
     },[items,canPrepareItems]);
     return context;
+}
+
+export const useGetNumColumns = ({windowWidth,numColumns,responsive})=>{
+    responsive = defaultBool(responsive,false);
+    const dimensions = responsive ? useWindowDimensions() : Dimensions.get("window");
+    if(responsive){
+        numColumns = grid.numColumns(windowWidth);
+    } else {
+        numColumns = defaultDecimal(numColumns,1);
+    }
+    const itemWindowWidth = dimensions.width/numColumns;
+    return {numColumns,itemWindowWidth,responsive};
 }

package/src/components/Menu/Menu.js

@@ -94,16 +94,12 @@ class _Menu extends AppComponent {
     });
 
   updateVisibility = async () => {
-    // _Menu is rendered in Portal, which updates items asynchronously
-    // We need to do the same here so that the ref is up-to-date
-    await Promise.resolve();
-
     if (this.props.visible) {
       this.show();
     } else {
       this.hide();
     }
-  };
+  }
 
   isBrowser = () => Platform.OS === 'web' && 'document' in global;
 
@@ -161,69 +157,62 @@ class _Menu extends AppComponent {
       document.removeEventListener('keyup', this.handleKeypress);
   };
 
-  show = async () => {
+  show (){
     if(!this._isMounted()) return;
-    const windowLayout = Dimensions.get('window');
-    const [menuLayout, anchorLayout] = await Promise.all([
+    return Promise.all([
       this.measureMenuLayout(),
       this.measureAnchorLayout(),
-    ]);
-
-    // When visible is true for first render
-    // native views can be still not rendered and
-    // measureMenuLayout/measureAnchorLayout functions
-    // return wrong values e.g { x:0, y: 0, width: 0, height: 0 }
-    // so we have to wait until views are ready
-    // and rerun this function to show menu
-    if (
-      !windowLayout.width ||
-      !windowLayout.height ||
-      !menuLayout.width ||
-      !menuLayout.height ||
-      (!anchorLayout.width) ||
-      (!anchorLayout.height)
-    ) {
-      requestAnimationFrame(this.show);
-      return;
-    }
-
-    this.setState(
-      () => ({
-        left: anchorLayout.x,
-        top: anchorLayout.y,
-        anchorLayout: {
-          height: anchorLayout.height,
-          width: anchorLayout.width,
-        },
-        menuLayout: {
-          width: menuLayout.width,
-          height: menuLayout.height,
-        },
-      }),
-      () => {
-        this.attachListeners();
-
-        const animation = theme.animation;
-        Animated.parallel([
-          Animated.timing(this.state.scaleAnimation, {
-            toValue: { x: menuLayout.width, y: menuLayout.height },
-            duration: ANIMATION_DURATION * animation.scale,
-            easing: EASING,
-            useNativeDriver: true,
-          }),
-          Animated.timing(this.state.opacityAnimation, {
-            toValue: 1,
-            duration: ANIMATION_DURATION * animation.scale,
-            easing: EASING,
-            useNativeDriver: true,
-          }),
-        ]).start(({ finished }) => {
-          if (finished) {
-            this.focusFirstDOMNode(this.menu);
-          }
-        });
+    ]).then(([menuLayout, anchorLayout])=>{
+      const windowLayout = Dimensions.get('window');
+      if (
+        !windowLayout.width ||
+        !windowLayout.height ||
+        !menuLayout.width ||
+        !menuLayout.height ||
+        (!anchorLayout.width) ||
+        (!anchorLayout.height)
+      ) {
+        requestAnimationFrame(this.show.bind(this));
+        return;
       }
-    );
+      this.setState({
+          left: anchorLayout.x,
+          top: anchorLayout.y,
+          rendered : true,
+          anchorLayout: {
+            height: anchorLayout.height,
+            width: anchorLayout.width,
+          },
+          menuLayout: {
+            width: menuLayout.width,
+            height: menuLayout.height,
+          },
+        },
+        () => {
+          this.attachListeners();
+  
+          const animation = theme.animation;
+          Animated.parallel([
+            Animated.timing(this.state.scaleAnimation, {
+              toValue: { x: menuLayout.width, y: menuLayout.height },
+              duration: ANIMATION_DURATION * animation.scale,
+              easing: EASING,
+              useNativeDriver: true,
+            }),
+            Animated.timing(this.state.opacityAnimation, {
+              toValue: 1,
+              duration: ANIMATION_DURATION * animation.scale,
+              easing: EASING,
+              useNativeDriver: true,
+            }),
+          ]).start(({ finished }) => {
+            if (finished) {
+              this.focusFirstDOMNode(this.menu);
+            }
+          });
+        }
+      );
+    });
   };
 
   hide = (cb) => {
@@ -237,7 +226,7 @@ class _Menu extends AppComponent {
       useNativeDriver: true,
     }).start(({ finished }) => {
       if (finished) {
-        this.setState({ menuLayout: { width: 0, height: 0 }},(e)=>{if(typeof cb ==='function') cb();});
+        this.setState({ rendered:false,menuLayout: { width: 0, height: 0 }},(e)=>{if(typeof cb ==='function') cb();});
         this.state.scaleAnimation.setValue({ x: 0, y: 0 });
         this.focusFirstDOMNode(this.anchor);
       }
@@ -294,7 +283,7 @@ class _Menu extends AppComponent {
 
     // We need to translate menu while animating scale to imitate transform origin for scale animation
     const positionTransforms = [];
-
+  
     // Check if menu fits horizontally and if not align it to right.
     if (left <= windowLayout.width - menuLayout.width - SCREEN_INDENT) {
       positionTransforms.push({
@@ -315,9 +304,7 @@ class _Menu extends AppComponent {
           outputRange: [menuLayout.width / 2, 0],
         }),
       });
-
       left += anchorLayout.width - menuLayout.width;
-
       const right = left + menuLayout.width;
       // Check if menu position has enough space from right side
       if (right > windowLayout.width - SCREEN_INDENT) {
@@ -325,7 +312,6 @@ class _Menu extends AppComponent {
       }
     }
     const handleScroll = canHandleScroll !== false? true : false;
-    
     // If the menu is larger than available vertical space,
     // calculate the height of scrollable view
     let scrollableMenuHeight = 0;
@@ -469,50 +455,48 @@ class _Menu extends AppComponent {
         style = {{backgroundColor:'transparent'}}
       >
         {anchor}
-        {true ? (
-          <Portal>
-            {rendered ? <TouchableWithoutFeedback
-              testID={testID+"_TouchableWithoutFeedBack"}
-              accessibilityLabel={overlayAccessibilityLabel}
-              role="button"
-              onPress={onDismiss}
-              style = {[hiddenStyle]}
-            >
-              <View style={[StyleSheet.absoluteFill,{flex:1,backgroundColor:'transparent'}]} testID={testID+"_Backdrop"} />
-            </TouchableWithoutFeedback>:null}
-            <View
-              testID = {testID+"_ContentContainer"}
-              ref={(ref) => {
-                this.menu = ref;
-              }}
-              collapsable={false}
-              accessibilityViewIsModal={visible}
-              style={[styles.wrapper, positionStyle, style,hiddenStyle]}
-              pointerEvents={visible ? 'box-none' : 'none'}
-              onAccessibilityEscape={onDismiss}
-            >
-              {rendered?<Animated.View style={{ transform: positionTransforms }} testID={testID+"_Animated"}>
-                <Surface
-                  elevation = {5}
-                  testID= {testID+"_Content"}
-                  style={
-                    [
-                      styles.shadowMenuContainer,
-                      shadowMenuContainerStyle,
-                      contentStyle,
-                      {backgroundColor : theme.colors.surface},
-                      minWidth && {minWidth : Math.max(minWidth,MIN_WIDTH)},
-                      sameWidth && anchorLayout.width ? {width:Math.max(anchorLayout.width,minWidth,MIN_WIDTH)} : undefined,
-                    ]
-                  }
-                >
-                  {((scrollableMenuHeight|| contentContainerStyle) && (<ScrollView contentContainerStyle={contentContainerStyle} testID={testID+"_ScrollView"}>{children}</ScrollView>
-                  )) || children}
-                </Surface>
-              </Animated.View> : null}
-            </View>
-          </Portal>
-        ) : null}
+        <Portal>
+          {rendered ? <TouchableWithoutFeedback
+            testID={testID+"_MenuTouchableWithoutFeedBack"}
+            accessibilityLabel={overlayAccessibilityLabel}
+            role="button"
+            onPress={onDismiss}
+            style = {[hiddenStyle]}
+          >
+            <View style={[StyleSheet.absoluteFill,{flex:1,backgroundColor:'transparent'}]} testID={testID+"_Backdrop"} />
+          </TouchableWithoutFeedback>:null}
+          <View
+            testID = {testID+"_MenuContentContainer"}
+            ref={(ref) => {
+              this.menu = ref;
+            }}
+            collapsable={false}
+            accessibilityViewIsModal={visible}
+            style={[styles.wrapper, positionStyle, style,hiddenStyle]}
+            pointerEvents={visible ? 'box-none' : 'none'}
+            onAccessibilityEscape={onDismiss}
+          >
+            {rendered?<Animated.View style={{ transform: positionTransforms }} testID={testID+"_Animated"}>
+              <Surface
+                elevation = {5}
+                testID= {testID+"_MenuContent"}
+                style={
+                  [
+                    styles.shadowMenuContainer,
+                    shadowMenuContainerStyle,
+                    contentStyle,
+                    {backgroundColor : theme.colors.surface},
+                    minWidth && {minWidth : Math.max(minWidth,MIN_WIDTH)},
+                    sameWidth && anchorLayout.width ? {width:Math.max(anchorLayout.width,minWidth,MIN_WIDTH)} : undefined,
+                  ]
+                }
+              >
+                {((scrollableMenuHeight|| contentContainerStyle) && (<ScrollView contentContainerStyle={contentContainerStyle} testID={testID+"_ScrollView"}>{children}</ScrollView>
+                )) || children}
+              </Surface>
+            </Animated.View> : null}
+          </View>
+        </Portal>
       </View>
     );
   }

package/src/components/SplashScreen/index.js

@@ -7,8 +7,6 @@ import View from "$ecomponents/View";
 import {isNativeMobile} from "$cplatform";
 import {defaultDecimal} from "$cutils";
 import {LogoProgress} from "$ecomponents/Logo";
-import { Provider as PaperProvider,Portal as PaperPortal} from "react-native-paper";
-import {PortalProvider } from '$ecomponents/Portal';
 import {defaultStr} from "$cutils";
 import styles, {
   _solidBackground,
@@ -100,8 +98,8 @@ const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,lo
     ],
   }
   const child = (animationDone && isLoaded)? React.isValidElement(children) && children : null;
-  return (
-    <View style={[styles.container]} testID={testID} id={testID}>
+  if(animationDone) return child;
+  return <View style={[styles.container]} testID={testID} id={testID}>
       {!animationDone ? <View style={StyleSheet.absoluteFill} testID={testID+"_Animation"}/> : null}
       <View style={styles.containerGlue} testID={testID+"_ContainerGlue"}>
         {!animationDone && (
@@ -112,30 +110,23 @@ const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,lo
         )}
         {(animationDone || isNative) && child}
         {!animationDone && (
-          <PortalProvider>
-            <PaperProvider>
-              <PaperPortal.Host>
-                  <View testID={testID+"_LogoContainer"} style={[StyleSheet.absoluteFill, styles.logoStyle]}>
-                  {(
-                    <Animated.View
-                      testID={testID+"_Logo"}
-                      style={_dynamicCustomComponentStyle(
-                            logoScale,
-                            logoOpacity,
-                            logoWidth,
-                            logoHeight
-                        )}>
-                      {<LogoProgress/>}
-                    </Animated.View>
-                  )}
-                </View>
-              </PaperPortal.Host>
-            </PaperProvider>
-          </PortalProvider>
+            <View testID={testID+"_LogoContainer"} style={[StyleSheet.absoluteFill, styles.logoStyle]}>
+            {(
+              <Animated.View
+                testID={testID+"_Logo"}
+                style={_dynamicCustomComponentStyle(
+                      logoScale,
+                      logoOpacity,
+                      logoWidth,
+                      logoHeight
+                  )}>
+                {<LogoProgress/>}
+              </Animated.View>
+            )}
+          </View>
         )}
       </View>
     </View>
-  )
 }
 
 

package/src/components/Table/Row/RowWrapper.native.js

@@ -7,7 +7,7 @@ import { getRowStyle } from "$ecomponents/Datagrid/utils";
 
 const TableRowWrapperComponent = forwardRef(({children,colSpan,...props},ref)=>{
     const {bordered,withDatagridContext} = useTable();
-    const selected = withDatagridContext ? useIsRowSelected(props) : false;
+    const selected = withDatagridContext ? useIsRowSelected(props.rowData || props.rowKey, props.rowIndex) : false;
     const rowStyle = useMemo(()=>{
         return getRowStyle({...props,bordered});
     },[selected])

package/src/components/Table/index.js

@@ -51,7 +51,7 @@ const getOnScrollCb = (refs,pos,cb2)=>{
     return isMobileNative()? cb : debounce(cb,200);
 }
 
-const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRender,height,progressBar,renderListContent,children,renderEmpty,renderItem,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,columns,...props},tableRef)=>{
+const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRender,height,progressBar,renderListContent,children,renderEmpty,renderItem,headerScrollViewProps,footerScrollViewProps,scrollViewProps,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,columns,...props},tableRef)=>{
     containerProps = defaultObj(containerProps);
     cellContainerProps = defaultObj(cellContainerProps);
     scrollViewProps = defaultObj(scrollViewProps);
@@ -252,8 +252,8 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
                                 const index = props['data-index'];
                                 const item = getRowByIndex(index) || props?.item || null;
                                 if(!item) return null;
-                                const args = {rowData:item,rowIndex:index,bordered,isTable:true};
-                                args.isSelected = withDatagridContext ? isRowSelected(args) : false;
+                                const args = {rowData:item,rowIndex:index,index,bordered,isTable:true};
+                                args.selected = withDatagridContext ? useIsRowSelected(item,index) : false;
                                 return <TableRowComponent {...props} style={[getRowStyle(args),props.style]}/>
                             },
                             Table: VirtuosoTableComponent,

package/src/index.js

@@ -40,6 +40,9 @@ import StatusBar from "$ecomponents/StatusBar";
 import {Provider as PaperProvider } from 'react-native-paper';
 import FontIcon from "$ecomponents/Icon/Font";
 import useContext from "$econtext/hooks";
+import {GestureHandlerRootView} from "react-native-gesture-handler";
+import KeyboardAvoidingViewComponent from '$ecomponents/KeyboardAvoidingView';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 export * from "./context";
 
 let MAX_BACK_COUNT = 1;
@@ -253,55 +256,59 @@ function App({init:initApp,initialRouteName:appInitialRouteName,render,onMount})
       onMountRef.current = true;
     }
   },[isLoaded])
-  const child = isLoaded ? <NavigationContainer 
-    ref={navigationRef}
-    initialState={initialState}
-    onStateChange={(state) =>{
-        setSession(NAVIGATION_PERSISTENCE_KEY,decycle(state),false);
-    }
-  }
-  >
-    <PortalProvider>
-      <Portal.Host>
-        <PreloaderProvider/>   
-        <DialogProvider responsive/>
-        <AlertProvider SimpleSelect={SimpleSelect}/>
-        <FormDataDialogProvider/>  
-        <BottomSheetProvider/>
-        <DropdownAlert ref={notificationRef}/>
-        <ErrorBoundaryProvider/>  
-        <Navigation
-          initialRouteName = {defaultStr(hasGetStarted ? appInitialRouteName : getStartedRouteName,"Home")}
-          state = {state}
-          hasGetStarted = {hasGetStarted}
-          isInitialized = {isInitialized}
-          onGetStart = {(e)=>{
-            setState({...state,hasGetStarted:true})
-          }}
-        />
-      </Portal.Host>
-    </PortalProvider>
-  </NavigationContainer>  : null;
+  const child = isLoaded ? <Navigation
+      initialRouteName = {defaultStr(hasGetStarted ? appInitialRouteName : getStartedRouteName,"Home")}
+      state = {state}
+      hasGetStarted = {hasGetStarted}
+      isInitialized = {isInitialized}
+      onGetStart = {(e)=>{
+        setState({...state,hasGetStarted:true})
+      }}
+  />: null;
   const content = isLoaded ? typeof render == 'function'? render({children:child,appConfig,config:appConfig}) : child : null;
-  return (<SplashScreen isLoaded={isLoaded}>
-      <AuthProvider>
-        <PaperProvider 
+  return <AuthProvider>
+      <NavigationContainer
+          ref={navigationRef}
+          initialState={initialState}
+          onStateChange={(state) =>{
+            if(!isLoaded) return;
+            setSession(NAVIGATION_PERSISTENCE_KEY,decycle(state),false);
+          }}
+      >
+      <PaperProvider 
           theme={theme}
           settings={{
             icon: (props) => {
               return <FontIcon {...props}/>
             },
           }}
-        >
-          <ErrorBoundary>
-          <StatusBar/>
-          <PreferencesContext.Provider value={preferences}>
-            {React.isValidElement(content) && content || child}
-          </PreferencesContext.Provider>  
-        </ErrorBoundary>
+      >
+        <PortalProvider>
+          <Portal.Host>
+            <PreloaderProvider/>   
+            <DialogProvider responsive/>
+            <AlertProvider SimpleSelect={SimpleSelect}/>
+            <FormDataDialogProvider/>  
+            <BottomSheetProvider/>
+            <DropdownAlert ref={notificationRef}/>
+            <ErrorBoundaryProvider/>
+            <GestureHandlerRootView style={{ flex: 1,flexGrow:1,flexShrink:1}} testID={"RN_GestureHandlerRootView"}>
+              <SafeAreaProvider testID={"RN_AppSafeAreaProvider"}>
+                <SplashScreen isLoaded={isLoaded}>
+                    <ErrorBoundary>
+                      <StatusBar/>
+                      <PreferencesContext.Provider value={preferences}>
+                        {React.isValidElement(content) && content || child}
+                      </PreferencesContext.Provider>  
+                    </ErrorBoundary>
+                </SplashScreen>
+              </SafeAreaProvider>
+            </GestureHandlerRootView>
+          </Portal.Host>
+        </PortalProvider>
       </PaperProvider>
-      </AuthProvider>
-  </SplashScreen>);
+    </NavigationContainer>
+  </AuthProvider>
 }
 
 export default App;

package/src/navigation/Drawer/index.js

@@ -25,9 +25,11 @@ const DrawerNavigator = React.forwardRef(({content,children:customChildren,state
             setIsLoggedIn(false);
         }
         const refreshItems = ()=>{
-            refreshItemsRef.current = true;
-            forceRender();
-            refreshItemsRef.current = false;
+            setTimeout(()=>{
+                refreshItemsRef.current = true;
+                forceRender();
+                refreshItemsRef.current = false;
+            },100)
         };
         APP.on(APP.EVENTS.AUTH_LOGOUT_USER,onLogoutUser);
         APP.on(APP.EVENTS.UPDATE_THEME,refreshItems);

package/src/navigation/Drawer/items/index.js

@@ -29,12 +29,12 @@ const useGetItems = (options)=>{
         APP.on(APP.EVENTS.REFRESH_MAIN_DRAWER,refreshItems);
         APP.on(APP.EVENTS.AUTH_LOGIN_USER,refreshItems);
         APP.on(APP.EVENTS.AUTH_LOGOUT_USER,refreshItems);
-        APP.on(APP.EVENTS.UPDATE_THEME,refreshItems);
+        //APP.on(APP.EVENTS.UPDATE_THEME,refreshItems);
         return ()=>{
             APP.off(APP.EVENTS.REFRESH_MAIN_DRAWER,refreshItems);
             APP.off(APP.EVENTS.AUTH_LOGIN_USER,refreshItems);
             APP.off(APP.EVENTS.AUTH_LOGOUT_USER,refreshItems);
-            APP.off(APP.EVENTS.UPDATE_THEME,refreshItems);
+            //APP.off(APP.EVENTS.UPDATE_THEME,refreshItems);
         }
     },[])
     return useMemo(()=>{

package/src/screens/Help/openLibraries.js

@@ -1 +1 @@
-module.exports = {"@FTO-CONSULT/EXPO-UI":{"name":"@FTO-CONSULT/EXPO-UI","version":"6.25.2","homepage":"https://github.com/borispipo/expo-ui#readme"}};
+module.exports = {"@fto-consult/expo-ui":{"name":"@fto-consult/expo-ui","version":"6.25.1","repository":{"type":"git","url":"git+https://github.com/borispipo/expo-ui.git"},"homepage":"https://github.com/borispipo/expo-ui#readme"}};