@fto-consult/expo-ui 6.49.2 → 6.51.0

package/create-transpile-module-transformer.js

@@ -0,0 +1,22 @@
+const {writeFile} = require("./electron/utils");
+const fs = require("fs"), path = require("path");
+module.exports = function({config,transpileModules}){
+    transpileModules = Array.isArray(transpileModules)? transpileModules : [];
+    if(!transpileModules.includes('@fto-consult')){
+        transpileModules.unshift('@fto-consult');
+    }
+    const transpilePath = path.resolve("./metro-exotic-transformer.js");
+    try {
+        writeFile(transpilePath,`
+module.exports = require('@expo/metro-config/transformer').createExoticTransformer({
+    transpileModules : ${JSON.stringify(transpileModules)},
+})
+        `);
+    } catch(e) {
+        console.log(e," generating metro-exotic-transformer on path ",transpilePath)
+    }
+    if(fs.existsSync(transpilePath)){
+        config.transformer.babelTransformerPath = transpilePath;
+    }
+    return config;
+}

package/metro-exotic-transformer.js

@@ -0,0 +1,5 @@
+const { createExoticTransformer } = require('@expo/metro-config/transformer');
+
+module.exports = createExoticTransformer({
+  transpileModules: ['@fto-consult']
+});

package/metro.config.js

@@ -1,6 +1,6 @@
 const path = require("path");
 const fs = require("fs");
-const { getDefaultConfig } = require('expo/metro-config');
+const { getDefaultConfig } = require('@expo/metro-config');
 module.exports = function(opts){
   //require("./create-expo-ui-package");
   const isDev = 'development' === process.env.NODE_ENV;
@@ -39,6 +39,8 @@ module.exports = function(opts){
       ...sourceExts,"txt",
       'jsx', 'js','tsx',
   ]
+  const transpileModules = [...(Array.isArray(opts.transpileModules)? opts.transpileModules : [])];
+  require("./create-transpile-module-transformer")({config,transpileModules});
   // Remove all console logs in production...
   config.transformer.minifierConfig.compress.drop_console = false;
   /*config.platforms = Array.isArray(config.platforms) && config.platforms || [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.49.2",
+  "version": "6.51.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "main",
   "scripts": {
@@ -70,7 +70,7 @@
     "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
     "@faker-js/faker": "^8.0.2",
-    "@fto-consult/common": "^3.44.0",
+    "@fto-consult/common": "^3.45.2",
     "@pchmn/expo-material3-theme": "^1.3.1",
     "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native-community/datetimepicker": "7.2.0",

package/src/auth/ThemeSelector/index.js

@@ -8,7 +8,7 @@ import Auth,{login,getLoginId} from "$cauth";
 import View from "$ecomponents/View";
 import { StyleSheet } from "react-native";
 import defaultTheme,{getColors} from "$theme/defaultTheme";
-import theme,{defaultDarkTheme,Colors,defaultLightTheme} from "$theme";
+import theme,{defaultDarkTheme,Colors,defaultLightTheme,lightColors,darkColors} from "$theme";
 import Provider from "$ecomponents/Form/FormData/DialogProvider";
 import Dropdown from "$ecomponents/Dropdown";
 import {defaultObj} from "$cutils";
@@ -16,6 +16,27 @@ import Icon from "$ecomponents/Icon";
 import {open,close} from "$preloader";
 import {fields,getThemeData} from "$theme/utils";
 import {modes} from "$ecomponents/TextField/utils";
+import {createMaterial3Theme,getMaterial3Theme} from "@pchmn/expo-material3-theme";
+import notify from "$cnotify";
+
+const mColors = [
+    {
+        light: '#FFE082',
+        dark: '#FFE082',
+    },
+    {
+        light: '#3E8260',
+        dark: '#ADF2C7',
+    },
+    {
+        light: '#756FAB',
+        dark: '#E5DFFF',
+    },
+     {
+        light: '#9F6C2C',
+        dark: '#FDDDB9',
+    },
+]
 
 const getStyle = (color)=>{
     if(!Colors.isValid(color)) return {};
@@ -47,7 +68,26 @@ export const getThemeFieldProps = (props,ref)=>{
     const userThemeName = defaultStr(userTheme.name,defaultTheme.name);
     const isDark = theme.isDark() || theme.isDarkUI();
     const defTheme = isDark ? {...defaultDarkTheme.colors,dark:true} : {...defaultLightTheme.colors,dark:false};
-    const itemsRef = React.useRef({...defaultObj(user.customThemes),...getColors()});
+    const customColors = React.useMemo(()=>{
+        const colors = getColors();
+        if(false && userThemeName){
+            const t = `${userThemeName}`;
+            const c = Colors.isValid(defaultTheme?.colors?.primary)? createMaterial3Theme(defaultTheme.colors.primary) : null,
+            c2 = Colors.isValid(defaultTheme?.colors.secondary)? createMaterial3Theme(defaultTheme?.colors.secondary) :null;
+            ['light','dark'].map((l)=>{
+                if(c && c[l]){
+                    const name = `${t}-primary-${l}`;
+                    colors[name] = {name,primaryName:userThemeName,secondaryName:`primary-${l}`,...c[l]};
+                }
+                if(c2 && c2[l]){
+                    const name2 = `${t}-secondary-${l}`;
+                    colors[name2] = {name:name2,primaryName:userThemeName,secondaryName:`secondary-${l}`,...c2[l]};
+                }
+            })
+        }
+        return colors;
+    },[]);
+    const itemsRef = React.useRef({...defaultObj(user.customThemes),...customColors});
     fields.textFieldMode = {
         type : 'select',
         items : {...modes,none:{code:'',label:'Dynamique'}},
@@ -90,7 +130,7 @@ export const getThemeFieldProps = (props,ref)=>{
                     }
                     data.custom = true;
                     customThemes[data.name] = data;
-                    itemsRef.current = {...customThemes,...getColors()};
+                    itemsRef.current = {...customThemes,...customColors};
                     user.customThemes = customThemes;
                     open((isEditing?"Modification ":"Enregistrement ")+"du thème...");
                     Auth.upsertUser(user,false).then(()=>{
@@ -118,7 +158,43 @@ export const getThemeFieldProps = (props,ref)=>{
         showAdd : typeof showAdd =='boolean'? showAdd : isUserActive || Auth.isTableDataAllowed({table:'users',action:'"changeTheme"'}),
         addIconTooltip : "Cliquez pour ajouter un nouveau thème",
         onAdd : ()=>{
-            showThemeExplorer();
+            return Provider.open({
+                title : "Ajouter un theme personnalisé",
+                fields : {
+                    color : {
+                        type :"color",
+                        text : 'A partir de la couleur',
+                        required : true,
+                    },
+                    name : fields.name,
+                    dark : fields.dark,
+                },
+                onSuccess : ({data})=>{
+                    try {
+                        const theme = createMaterial3Theme(data.color)
+                        const dat = {...data,...Object.assign({},(data.dark? theme.dark : theme?.light))};
+                        dat.text = Colors.isValid(dat.text)? dat.text : dat.onBackground || dat.onSurface;
+                        const cols = dat.dark ? darkColors : lightColors;
+                        ["warning","error","info","success","divider"].map((c)=>{
+                            if(!Colors.isValid(dat[c])){
+                                dat[c] = cols[c];
+                                const onKey = `on${c.ucFirst()}`;
+                                dat[onKey] = dat[onKey] || cols[onKey];
+                            }
+                        })
+                        if(isObj(dat)){
+                            delete dat.color;
+                            //Provider.close();
+                            setTimeout(()=>{
+                                showThemeExplorer(dat);
+                            },500);
+                        }
+                    } catch(e){
+                        notify.error(e);
+                        Provider.close();
+                    }
+                }
+            })
         },
         onChange : (args)=>{
             args = defaultObj(args);

package/src/components/Chip/index.js

@@ -200,7 +200,7 @@ const ChipComponent = React.forwardRef(({
             // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
             accessibilityTraits="button"
             accessibilityComponentType="button"
-            role="button"
+            //role="button"
             accessibilityLabel={closeIconAccessibilityLabel}
             testID={testID+"_CloseButtonRipple"}
           >

package/src/components/Color/index.js

@@ -69,7 +69,7 @@ const ColorPickerComponent = React.forwardRef ((props,ref)=>{
     return <>
             <Pressable
                 {...containerProp}
-                role="button"
+                //role="button"
                 disabled = {!isEditable}
                 pointerEvents = {pointerEvents}
                 accessibilityLabel={defaultStr(label,text)}

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

@@ -261,12 +261,7 @@ const DatagridFactory = (Factory)=>{
         getMaxSelectedRows(){
             return isMobileMedia()? 30 : 50;
         }
-        toggleFilterColumnVisibility(field,visible){
-            if(!isNonNullString(field)) return;
-            let filteredColumns = {...this.state.filteredColumns};
-            filteredColumns[field] = visible;
-            this.setSessionData("filteredColumns"+this.getSessionNameKey(),filteredColumns);
-        }
+        
         /*** affiche les infos de l'item */
         onToggleExpandItem({item,index,rowIndex,rowKey,...rest}){
             if(!isObj(this.bottomSheetContext) || typeof this.bottomSheetContext.open !=='function') return;
@@ -410,7 +405,7 @@ const DatagridFactory = (Factory)=>{
                 visibleColumnsNames,
                 filteredColumns,
                 filters :headerFilters,
-            } = this.preparedColumns;
+            } = this.getPreparedColumns();
             const hasFootersFields = this.hasFootersFields();
             const datagridHeader = <View testID={testID+"_HeaderContainer"} pointerEvents={pointerEvents} style={[styles.datagridHeader]}>
                 <ScrollView testID={testID+"_HeaderScrollView"} horizontal  contentContainerStyle={StyleSheet.flatten([styles.contentContainerStyle,styles.minW100])}>

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

@@ -1188,11 +1188,11 @@ export default class CommonDatagridComponent extends AppComponent {
         return defaultStr(this.props.table,this.props.tableName,this.props.sessionName);
    }
    /*** affiche ou masque une colonne filtrée */
-   toggleFilterColumnVisibility(field){
+   toggleFilterColumnVisibility1(field){
         if(!isNonNullString(field)) return;
         setTimeout(()=>{
             this.setIsLoading(true,()=>{
-                let filteredColumns = {...this.state.filteredColumns};
+                const filteredColumns = {...this.state.filteredColumns};
                 filteredColumns[field] = defaultBool(filteredColumns[field],false) == false ? true : false;
                 this.prepareColumns({filteredColumns});
                 this.setState({filteredColumns},()=>{
@@ -1204,8 +1204,16 @@ export default class CommonDatagridComponent extends AppComponent {
                     }
                 });
             },true)
-        },TIMEOUT)
+        },TIMEOUT);
+    }
+    toggleFilterColumnVisibility(field,visible){
+        if(!isNonNullString(field)) return;
+        const filteredColumns = {...this.state.filteredColumns};
+        filteredColumns[field] = visible;
+        this.setSessionData("filteredColumns"+this.getSessionNameKey(),filteredColumns);
+        return visible;
     }
+    
    /*** affiche ou masque une colonne 
     @param {string} field
    */
@@ -2370,7 +2378,7 @@ export default class CommonDatagridComponent extends AppComponent {
       return this.state.showFooters || this.hasSectionListData() && this.state.displayOnlySectionListHeaders;
    }
    canShowFilters(){
-        return this.state.showFilters
+        return this.isFilterable() && this.state.showFilters
    }
    toggleDisplayOnlySectionListHeaders(){
         if(!this.canDisplayOnlySectionListHeaders()) return
@@ -2718,6 +2726,9 @@ export default class CommonDatagridComponent extends AppComponent {
     isValidRowKey(rowKey){
         return !!(isNonNullString(rowKey) || typeof rowKey =='number');
     }
+    getPreparedColumns(){
+        return this.preparedColumns;
+    }
     prepareData(args,cb){
         let {pagination,config,aggregatorFunction:customAggregatorFunction,displayOnlySectionListHeaders:cdisplayOnlySectionListHeaders,data,force,sectionListColumns,sectionListCollapsedStates,updateFooters} = defaultObj(args);
         cb = typeof cb ==='function'? cb : typeof args.cb == 'function'? args.cb : undefined;
@@ -2962,7 +2973,7 @@ export default class CommonDatagridComponent extends AppComponent {
                         const footer = footers[column];
                         const canD = renderSectionListHeaderOnFirstCell && !hasAlreadRenderMainHeaderOnFirstCell;
                         const cProps = canD ? sectionListHeaderContainerProps : {};
-                        cells.push(<Cell {...cellProps} {...cProps} key={key2} width={width} testID={testID+"_FooterCellContainer_"+key2} style={[tableStyles.headerItemOrCell,!isA?{alignItems:'flex-start',justifyContent:'flex-start'}:{marginLeft:0,paddingLeft:0,marginRight:5},cellProps.style,cProps.style]}>
+                        cells.push(<Cell {...cellProps} {...cProps} key={key2} width={width} testID={testID+"_FooterCellContainer_"+key2} style={[tableStyles.headerItemOrCell,!isA?{alignItems:'flex-start',justifyContent:'flex-start'}:{marginLeft:0,paddingLeft:0,marginRight:5,paddingTop:5,paddingBottom:5},cellProps.style,cProps.style]}>
                             {canD ? headerContent:null}
                             <Footer
                                 key = {key2}

package/src/components/Datagrid/Table/Filter.js

@@ -0,0 +1,7 @@
+import React from "$react";
+import View from "$ecomponents/View";
+import Label from "$ecomponents/Label";
+
+export default function DatagridTableFilterComponent({}){
+    return null;
+}

package/src/components/Datagrid/Table/FilterMenu.js

@@ -0,0 +1,27 @@
+
+import Icon from "$ecomponents/Icon";
+import Menu from "$ecomponents/Menu";
+import { useDatagrid } from "./hooks";
+import React from "$react";
+import { getMenuStyle } from "./styles";
+
+export default function DatagridTableFilterMenuComponent({filterKey,filteredColumns,context,...props}){
+    const cVisible = !!filteredColumns[filterKey];
+    const [visible,setVisible] = React.useState(cVisible);
+    React.useEffect(()=>{
+        if(false && visible !== cVisible){
+            setVisible(cVisible);
+        }
+    },[cVisible])
+    return <Menu.Item
+        {...props}
+        icon = {visible ? "check" : null}
+        onPress={(e)=>{
+            const nVisible  = context?.toggleFilterColumnVisibility? context.toggleFilterColumnVisibility(filterKey,!!!filteredColumns[filterKey]) : visible;
+            if(nVisible !== visible){
+                setVisible(nVisible);
+            }
+        }}
+    />
+    return null;
+}

package/src/components/Datagrid/Table/Filters.js

@@ -0,0 +1,71 @@
+import React from "$react";
+import View from "$ecomponents/View";
+import {defaultStr,defaultBool,defaultArray,isObj} from "$cutils";
+import theme from "$theme";
+import { StyleSheet,ScrollView } from "react-native";
+import Label from "$ecomponents/Label";
+import Filter from "./Filter";
+import FiltersMenu from "./FiltersMenu";
+import FilterMenu from "./FilterMenu";
+import {useDatagrid} from "./hooks";
+
+export default function DatagridTableFiltersComponent({orOperator,andOperator,testID}){
+    testID = defaultStr(testID,"RN_DatagridTableFiltersComponent")
+    const {visible,isLoading,visibleColumnsNames,filters,filteredColumns,context} = useDatagrid();
+    const valuesRefs = React.useRef({});
+    const filteredRef = React.useRef({});
+    const {content,colMenus} = React.useStableMemo(()=>{
+        const content = [];
+        Object.map(filters,(filter,index)=>{
+            if(isObj(filter)){ 
+                const {onChange,filter:isFiltered,...rest} = filter;
+                if(isFiltered === false) return null;
+                const key = defaultStr(filter.key,filter.field,filter.columnField,filter.index,index+"");
+                content.push(<Filter
+                    {...rest}
+                    {...(isObj(valuesRefs.current[key]) ? valuesRefs.current[key] : {})}
+                    dynamicRendered
+                    orOperator = {defaultBool(orOperator,filter.orOperator,true)}
+                    andOperator = {defaultBool(andOperator,filter.andOperator,true)}
+                    onChange = {(arg)=>{
+                        if(!arg.action && !arg.operator || !arg.field) return;
+                        const canHandle = canHandleFilter(arg);
+                        valuesRefs.current[key] = arg;
+                        if(filteredRef.current[key] !== canHandle){
+                            if(canHandle){
+                                canHandlerFilterRef.current++;
+                            } else {
+                                canHandlerFilterRef.current = Math.max(0,canHandlerFilterRef.current-1);
+                            }
+                        }
+                        filteredRef.current[key] = canHandle;
+                        if(onChange){
+                            onChange(arg);
+                        }
+                    }}
+                />)
+            }
+        })
+        return {content};
+    },[filters])
+    return <ScrollView horizontal testID={testID+"_FiltersScrollView"}>
+        <View testID={testID} style = {[theme.styles.row,styles.container,theme.styles.rowWrap,theme.styles.justifyStart,theme.styles.alignItemsCenter]}>
+            {<FiltersMenu/>}
+            {content}
+        </View>
+    </ScrollView>
+}
+
+const styles = StyleSheet.create({
+    hidden : {
+        opacity : 0,
+        display : "none",
+    },
+    container : {
+        paddingLeft : 10,
+        paddingRight : 10,
+    },
+    isLoading : {
+        pointerEvents : "none",
+    },
+});

package/src/components/Datagrid/Table/FiltersMenu.js

@@ -0,0 +1,45 @@
+import Menu from "$ecomponents/Menu";
+import Icon from "$ecomponents/Icon";
+import { useDatagrid } from "./hooks";
+import {Pressable} from "react-native";
+import {defaultStr} from "$cutils";
+import theme from "$theme";
+import Label from "$ecomponents/Label";
+import React from "$react";
+import { getMenuStyle } from "./styles";
+
+export default function DatagridFiltersMenuComponent({testID,...props}){
+    const {filteredColumns,filterableColumnsNames,...rest} = useDatagrid();
+    const isFiltered = !!Object.size(filteredColumns,true);
+    testID = defaultStr(testID,"RN_DatagridFiltersMenuComponent")
+    console.log(props," is props heeein");
+    const items = React.useStableMemo(()=>{
+        const items = [];
+        console.log(rest," is ressss",filterableColumnsNames);
+        Object.map(filterableColumnsNames,(field)=>{
+        
+        });
+        return;
+        colMenus.push(<FilterMenu
+            key = {key}
+            filterKey={key}
+            {...filter}
+            context={context}
+            filteredColumns={filteredColumns}
+        />)
+    },[filterableColumnsNames]);
+    return <Menu
+        testID={testID}
+        {...props}
+        anchor={(p)=>{
+            return <Pressable {...p} testID={testID+"_FilterPressableContainer"} style={[theme.styles.row,theme.styles.justifyContentStart,theme.styles.alignItemsCenter,getMenuStyle()]}>
+                <Icon
+                    name={isFiltered?"filter-menu":"filter-plus"}
+                    primary = {isFiltered}
+                    size={20}
+                />
+                <Label primary={isFiltered} textBold={isFiltered}>Filtres</Label>
+            </Pressable>
+        }}
+    />
+}

package/src/components/Datagrid/Table/hooks.js

@@ -0,0 +1,8 @@
+import { useDatagrid as ud } from "../hooks";
+export const useDatagrid = ()=>{
+    const {context} = ud();
+    const visible = context && typeof context?.canShowFilters =='function' && context.canShowFilters()|| false;
+    const isLoading = context && context.isLoading() || false;
+    const r = typeof context?.getPreparedColumns =='function'? context?.getPreparedColumns() : {};
+    return {...r,visible,isLoading,context};
+}

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

@@ -15,6 +15,7 @@ import Footer from "../Footer/Footer";
 import theme from "$theme";
 import Table,{styles as tableStyles} from "$ecomponents/Table";
 import DatagridProvider from "../hooks/Provider";
+import Filters from "./Filters";
 
 
 const DatagridFactory = (Factory)=>{
@@ -114,6 +115,7 @@ const DatagridFactory = (Factory)=>{
                 this.listRef.current.scrollToIndex({index});
             }
         }
+        
         getTestID(){
             return defaultStr(this.props.testID,"RN_DatagridTable");
         }
@@ -288,9 +290,7 @@ const DatagridFactory = (Factory)=>{
             </View> : null;
             return <DatagridProvider context={this}>
                      <View style={[styles.container,{flex:1}]} testID={testID+"_TableContainer"} pointerEvents={pointerEvents}>
-                        <View ref={(el)=>{
-                            this.layoutRef.current = el;
-                        }} testID={testID+"_LayoutContainer"}>
+                        <View ref={(el)=>{this.layoutRef.current = el;}} testID={testID+"_LayoutContainer"}>
                             {this.props.showActions !== false ? <DatagridActions 
                                 pointerEvents = {pointerEvents}
                                 title = {this.renderDataSourceSelector()}
@@ -298,6 +298,11 @@ const DatagridFactory = (Factory)=>{
                             /> : null}
                             {rPagination}
                             {progressBar}  
+                            <Filters
+                                testID={testID+"_DatagridTableHeaderFilters"}
+                                orOperator = {this.props.filterOrOperator}
+                                andOperator = {this.props.filterAndOperator}
+                            />
                         </View>
                         {canRenderChart ?
                             <View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
@@ -315,7 +320,7 @@ const DatagridFactory = (Factory)=>{
                             renderItem = {this.renderFlashListItem.bind(this)}
                             renderSectionHeader = {this.renderFlashListItem.bind(this)}
                             hasFooters = {hasFootersFields && !canRenderChart ? true : false}
-                            showFilters = {showFilters}
+                            showFilters = {false}
                             showFooters = {showFooters && !canRenderChart ? true : false}
                             showHeaders = { canRenderChart ? !!showFilters : true}
                             headerCellContainerProps = {{
@@ -335,7 +340,7 @@ const DatagridFactory = (Factory)=>{
                             data = {this.state.data}
                             footers = {this.getFooterValues()}
                             renderHeaderCell={this.renderHeaderCell.bind(this)}
-                            renderFilterCell={this.renderFilterCell.bind(this)}
+                            //renderFilterCell={this.renderFilterCell.bind(this)}
                             renderFooterCell={this.renderFooterCell.bind(this)}
                             renderEmpty = {this.renderEmpty.bind(this)}
                         />}

package/src/components/Datagrid/Table/styles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import theme from '$theme';
+
+const styles = StyleSheet.create({
+    menuItem : {
+        borderRadius : 10,
+    }
+});
+
+export const getMenuStyle = (style)=>([
+    styles.menuItem,
+    {backgroundColor:theme.surfaceBackground},
+    style,
+]);
+
+export default styles;

package/src/components/Expandable/index.js

@@ -110,7 +110,7 @@ const ExpandableComponent = React.forwardRef(({
             borderless = {false}  
             accessibilityTraits="button"
             accessibilityComponentType="button"
-            role="button"
+            //role="button"
             style={[styles.container,props.style]}
             onPress={handlePressAction}
             onLongPress={onLongPress}

package/src/components/Fab/GroupComponent.js

@@ -174,7 +174,7 @@ const FABGroup = ({
           // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
           accessibilityTraits="button"
           accessibilityComponentType="button"
-          role="button"
+          //role="button"
           accessibilityState={{ expanded: open }}
           style={StyleSheet.flatten([styles.fab, fabStyle])}
           visible={visible}
@@ -310,7 +310,7 @@ const _FabItem = function({children,label,disabled:customDisabled,pointerEvents,
                  }
                  accessibilityTraits="button"
                  accessibilityComponentType="button"
-                 role="button"
+                 //role="button"
                >
                  <Text testID={testID+"_Label"} style={StyleSheet.flatten([{ color},cursorStyle])}>
                    {label}
@@ -345,7 +345,7 @@ const _FabItem = function({children,label,disabled:customDisabled,pointerEvents,
              // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
              accessibilityTraits="button"
              accessibilityComponentType="button"
-             role="button"
+             //role="button"
              testID={testID}
              visible={open}
         />

package/src/components/Form/Fields/SelectTableData/Component.js

@@ -60,9 +60,7 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,isStructData,ge
     }
     const isMounted = React.useIsMounted();
     
-    const [state,setState] = React.useState({
-        items : [],
-    });
+    const [stateItems,setItems] = React.useState([]);
     const [isLoading,setIsLoading] = React.useState(true);
     fetchOptions = Object.clone(defaultObj(fetchOptions));
     const queryPath = fetchItemsPath || typeof fKeyTable.queryPath =='string' && fKeyTable.queryPath || typeof fKeyTable.fetchPath =='string' && fKeyTable.fetchPath || '';
@@ -185,7 +183,7 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,isStructData,ge
                             }
                         }
                     }
-                    setState({...state,items});
+                    setItems(items);
                     if(onFetchItems){
                         onFetchItems({data:items,items,context,props});
                     }
@@ -256,9 +254,9 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,isStructData,ge
     },[isFilter,foreignKeyTable,customShowAdd]);
     return <Dropdown
         {...props}
+        items = {stateItems}
         isFilter = {isFilter}
         showAdd = {showAdd}
-        {...state}
         isLoading = {isLoading}
         dialogProps = {dialogProps}
         ref = {ref}

package/src/components/Menu/Menu.js

@@ -474,7 +474,7 @@ class _Menu extends AppComponent {
             {rendered ? <TouchableWithoutFeedback
               testID={testID+"_Menu_TouchableWithoutFeedBack"}
               accessibilityLabel={overlayAccessibilityLabel}
-              role="button"
+              //role="button"
               onPress={onDismiss}
               style = {[hiddenStyle]}
             >

package/src/components/Modal/index.js

@@ -122,7 +122,7 @@ const ModalComponent = React.forwardRef((props,ref)=>{
       >
           <TouchableWithoutFeedback
             accessibilityLabel={overlayAccessibilityLabel}
-            role="button"
+            //role="button"
             disabled={!dismissable}
             onPress={dismissable ? hideModal : undefined}
             importantForAccessibility="no"

package/src/components/PhoneInput/index.js

@@ -163,7 +163,7 @@ export default function PhoneInputComponent(props){
                     pointerEvents = {pointerEvents}
                     left = {
                         <Pressable testID={testID+"_Left"} style={[styles.flag,disabledStyle,!isFlatMode && styles.notFlatModeFlag]}
-                            role="button"
+                            //role="button"
                             disabled = {props.disabled}
                             pointerEvents = {pointerEvents}
                             onPress={onPressFlag}

package/src/components/SimpleSelect/index.js

@@ -278,7 +278,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
     const autoFocus = canAutoFocusSearchField({visible,items:renderingItems});
     testID = defaultStr(testID, "RN_SimpleSelectComponent");
     anchor =  <Pressable
-        role="button"
+        //role="button"
         activeOpacity={0.3}
         testID = {testID}
         {...defaultObj(anchorContainerProps)}