@fto-consult/expo-ui 5.4.0 → 5.5.2

package/bin/init.js

@@ -31,8 +31,8 @@ module.exports = ({
             "package" : "npx expo-ui electron package",
             "compile2package" : "npx expo-ui electron package compile"
         }
+        projectRootPackage.name = projectRootPackage.name.trim().toUpperCase();
         projectRootPackage.realAppName = typeof projectRootPackage.realAppName =="string" && projectRootPackage.realAppName || projectRootPackage.name;
-        projectRootPackage.name = projectRootPackage.name.trim();
         if(!projectRootPackage.name.endsWith(appSuffix)){
             projectRootPackage.name +=appSuffix;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "5.4.0",
+  "version": "5.5.2",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.3.5",
+    "@fto-consult/common": "^3.4.1",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-community/datetimepicker": "^6.7.3",
@@ -95,9 +95,10 @@
     "react-native-big-list": "^1.6.0",
     "react-native-blob-util": "^0.17.0",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-iphone-x-helper": "^1.3.1",
     "react-native-mime-types": "^2.3.0",
-    "react-native-paper": "^4.12.5",
-    "react-native-paper-dates": "^0.9.2",
+    "react-native-paper": "^5.4.1",
+    "react-native-paper-dates": "^0.15.1",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "^4.5.0",
     "react-native-screens": "~3.20.0",

package/src/components/AppBar/utils.js

@@ -26,6 +26,7 @@ const renderAction = ({action,isAlert,actionProps,opts,isAppBarAction,isAppBarAc
     rest = Object.assign({},rest);
     rest.accessibilityLabel = defaultStr(rest.accessibilityLabel,rest.title,rest.text,rest.label,rest.children);
     const color = theme.colors.primaryText;
+    
     rest.style = {...defaultObj(StyleSheet.flatten(actionProps.style)),elevation:0,...defaultObj(StyleSheet.flatten(rest.style))};
     if(isAppBarActionStyle !== false && (isAppBarAction || opts.isAppBarAction)){
         rest.color = defaultVal(color);

package/src/components/BottomSheet/Menu.js

@@ -6,35 +6,32 @@ import {defaultObj,defaultDecimal,defaultStr,isDecimal,defaultBool} from "$utils
 import View from "$ecomponents/View";
 import PropTypes from "prop-types";
 import {getContentHeight} from "./utils";
+import Dimensions from "$dimensions";
 
 const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
     let {anchor,anchorProps,screenIndent,height:customHeight,bindResizeEvent,onDismiss,testID,visible:customVisible,controlled,mobile,animateOnClose,renderMenuContent,sheet,children,...rest} = props;
     rest = defaultObj(rest);
     const isControlled = controlled ? true : false;
-    const visibleRef = React.useRef(null);
     const [state,setState] = React.useState({
         visible : false,
         height : undefined,
     });
-    const visible = typeof visibleRef.current =='boolean'? visibleRef.current : isControlled ? customVisible : state.visible;
-    visibleRef.current = null;
+    const [key,setKey] = React.useState(false);
+    const visible = isControlled ? customVisible : state.visible;
     let height = state.height;
     const isMounted = React.useIsMounted();
     const anchorRef = React.useRef(null);
-    const isMobile = x=> mobile || sheet === true || renderMenuContent === false || isMobileMedia() ? true : false;
-    let isMob = isMobile();
+    const isMob = mobile || sheet === true || renderMenuContent === false || Dimensions.isMobileOrTabletMedia() ? true : false;
     testID = defaultStr(testID,'RN_BottomSheetMenuComponent');
     const innerRef = React.useRef(null);
     const open = (event)=>{
-        if(!isMobile()) return;
         React.stopEventPropagation(event);
-        if(!isMounted() || visible) return;
+        if(!isMounted()) return;
         getContentHeight(anchorRef,({height})=>{
             setState({...state,visible:true,height});
         },screenIndent);
     }, close = ()=>{
-        if(!isMobile()) return;
-        if(!isMounted() || !visible) return;
+        if(!isMounted()) return;
         if(isControlled){
             if(onDismiss){
                 onDismiss({});
@@ -43,6 +40,7 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
         }
         setState({...state,visible:false})
     }
+    const prevIsMob = React.usePrevious(isMob);
     const Component = isMob ? BottomSheet : Menu;
     anchorProps = defaultObj(anchorProps);
     if(isMob){
@@ -67,6 +65,9 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
         delete rest.visible;
         height = undefined;
     }
+    if(prevIsMob !== isMob){
+        rest.visible = visible;
+    }
     if(!isControlled){
         rest.onAnchorPress = ()=>{
             open();
@@ -77,8 +78,7 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
     React.useEffect(()=>{
         const closeModal = ()=>{
             if(!isMounted()) return;
-            visibleRef.current = false;
-            setState({...state});
+            setKey(!key);
         }
         if(bindResizeEvent !== false){
             APP.on(APP.EVENTS.RESIZE_PAGE,closeModal);
@@ -97,7 +97,7 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
         {isMob && React.isValidElement(anchor)? anchor : null}
         <Component
             {...rest}
-            bindResizeEvent = {false}
+            key = {isMob?"mobile":"desktop"}
             testID = {testID}
             height = {controlled?customHeight:height}
             ref = {React.useMergeRefs(innerRef,ref)}
@@ -106,7 +106,6 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
             children = {visible && (React.isValidElement(children) || Array.isArray(children))?children:undefined}
         />
     </>
-
 })
 
 BottomSheetMenuComponent.propTypes = {

package/src/components/Button/index.js

@@ -14,53 +14,54 @@ import Label from "$ecomponents/Label";
 import {defaultObj,defaultVal,defaultDecimal,defaultStr} from "$utils";
 
 import PropTypes from "prop-types";
-const white = "white",black = "black";
+const white = "white";
 
-const ButtonComponent = React.forwardRef(({
-  disabled:customDisabled,
-  compact,
-  mode = 'text',
-  dark,
-  loading,
-  icon,
-  color: buttonColor,
-  children,
-  text,
-  label,
-  isCancelButton,
-  error,
-  upperCase = true,
-  accessibilityLabel,
-  onPress,
-  iconPosition,
-  iconBefore,
-  onLongPress,
-  style,
-  contentStyle,
-  contentProps,
-  labelStyle,
-  labelProps,
-  testID,
-  iconSize,
-  iconProps,
-  left,
-  elevation : customElevation,
-  right,
-  accessible,
-  backgroundColor,
-  borderColor,
-  accessibilityRole,
-  contentContainerProps,
-  loadingProps,
-  rounded,
-  containerProps,
-  disableRipple,
-  noPadding,
-  noMargin,
-  isAlert,
-  borderRadius,
-  ...rest
-},ref) => {
+const ButtonComponent = React.forwardRef((prs,ref) => {
+  let {
+    disabled:customDisabled,
+    compact,
+    mode = 'text',
+    dark,
+    loading,
+    icon,
+    color: buttonColor,
+    children,
+    text,
+    label,
+    isCancelButton,
+    error,
+    upperCase = true,
+    accessibilityLabel,
+    onPress,
+    iconPosition,
+    iconBefore,
+    onLongPress,
+    style:customStyle,
+    contentStyle,
+    contentProps,
+    labelStyle,
+    labelProps,
+    testID,
+    iconSize,
+    iconProps,
+    left,
+    elevation : customElevation,
+    right,
+    accessible,
+    backgroundColor,
+    borderColor,
+    accessibilityRole,
+    contentContainerProps,
+    loadingProps,
+    rounded,
+    containerProps,
+    disableRipple,
+    noPadding,
+    noMargin,
+    isAlert,
+    borderRadius,
+    ...rest
+  } = prs;
   isCancelButton = isCancelButton || error && true || false;
   children = defaultVal(children,label,text);
   testID = defaultStr(testID,'RN_ButtonComponent');
@@ -140,25 +141,22 @@ const ButtonComponent = React.forwardRef(({
   };
   contentContainerProps = defaultObj(contentContainerProps);
   containerProps = defaultObj(containerProps);
-  style = Object.assign(StyleSheet.flatten(style) || {});
+  const style = StyleSheet.flatten(customStyle) || {};
+
   labelStyle = StyleSheet.flatten([labelStyle]);
   const disabled = isDisabled || isLoading;
-  let textColor = Colors.isValid(buttonColor)?buttonColor : Colors.isValid(labelStyle.color) ? labelStyle.color : Colors.isValid(style.color)? style.color : isCancelButton? theme.colors.errorText  : theme.colors.primary,
+  let textColor = Colors.isValid(style.color)? style.color : Colors.isValid(buttonColor)?buttonColor : isCancelButton? theme.colors.errorText   : Colors.isValid(labelStyle.color) ? labelStyle.color : theme.colors.primary,
     borderWidth;
     const restButtonStyle = {
       opacity : disabled ? DISABLED_OPACITY : undefined
-    };
-  
+  };
+
   iconProps = defaultObj(iconProps);
   labelProps = defaultObj(labelProps);
   contentProps = defaultObj(contentProps);
-  if(isCancelButton){
-    style.backgroundColor = theme.colors.error;
-    style.color = theme.styles.errorText ;
-  }
   if (!disabled && hasElevation) {
-    backgroundColor = Colors.isValid(backgroundColor)? backgroundColor : Colors.isValid(style.backgroundColor)?style.backgroundColor  : undefined;
-    borderColor = Colors.isValid(borderColor)? borderColor : Colors.isValid(style.borderColor)? style.borderColor : isCancelButton ? theme.styles.errorText : undefined;
+    backgroundColor = Colors.isValid(style.backgroundColor)?style.backgroundColor : Colors.isValid(backgroundColor)? backgroundColor : isCancelButton ? style.backgroundColor = theme.colors.error : undefined;
+    borderColor = Colors.isValid(style.borderColor)? style.borderColor : isCancelButton ? theme.styles.errorText : Colors.isValid(borderColor)? borderColor : undefined;
   }
   if(theme.isDark() && !hasElevation){
     textColor = white;

package/src/components/Dialog/DialogActions.js

@@ -6,6 +6,7 @@ import {MORE_ICON} from "$ecomponents/Icon/utils";
 import {renderActions} from "./utils";
 import View from "$ecomponents/View";
 import { StyleSheet } from "react-native";
+import DialogActions from "./RNPDialogActions";
 
 const DialogActionsComponent = React.forwardRef(({actions,isAlert,onAlertRequestClose,testID,containerProps,actionMutator,actionProps,cancelButton,responsive,isFullScreen,fullScreen,actionsProps,menuProps,...rest},ref)=>{
     const forceRender = React.useForceRender();
@@ -35,7 +36,7 @@ const DialogActionsComponent = React.forwardRef(({actions,isAlert,onAlertRequest
     testID = testID||'DialogComponent_Actions';
     if(menuActions && (menuActions.actions.length || menuActions.menus.length)){
         return <View testID={testID} {...containerProps} style={[styles.container,containerProps.style]} ref={ref}>
-            <Dialog.Actions testID={testID+"_ActionsContainer"} {...rest} style={[styles.actions,rest.style]}>
+            <DialogActions testID={testID+"_ActionsContainer"} {...rest} style={[styles.actions,rest.style]}>
                 {menuActions.actions}
                 {menuActions.menus.length ? <Menu
                     testID = {testID+"_MenuWrapper"}
@@ -47,7 +48,7 @@ const DialogActionsComponent = React.forwardRef(({actions,isAlert,onAlertRequest
                     }}
                     items = {menuActions.menus}
                 />: null}
-            </Dialog.Actions> 
+            </DialogActions> 
         </View>
     }
     return null;

package/src/components/Dialog/RNPDialogActions.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { StyleSheet, View,} from 'react-native';
+import PropTypes from "prop-types";
+import { StyleProp } from '$theme';
+import {defaultStr} from "$utils";
+
+const DialogActions = ({testID,...props}) => {
+  testID = defaultStr(testID,"RNP_DialogActionsComponent")
+  return (
+    <View
+      {...props}
+      testID = {testID}
+      style={[styles.container, props.style]}
+    >
+      {React.Children.map(props.children, (child, i) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child, {
+              compact: true,
+              testID : defaultStr(child?.props?.testID,testID+"_Action"),
+              //style: child?.props?.style,
+            })
+          : child
+      )}
+    </View>
+  );
+};
+
+DialogActions.displayName = 'Dialog.Actions';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: 8,
+  },
+  v3Container: {
+    flexDirection: 'row',
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingBottom: 24,
+    paddingHorizontal: 24,
+  },
+});
+
+export default DialogActions;
+
+
+DialogActions.propTypes = {
+    children: PropTypes.node,
+    style : StyleProp,
+}

package/src/components/Dialog/confirm/showConfirmOrAlertOrPrompt.js

@@ -56,6 +56,7 @@ export default function showConfirm (p,cb){
     if(isNonNullString(yes)){
         yes = {text:yes}
     }
+    testID = defaultStr(testID,"RN_AlertDialogComponent");
     buttons = defaultVal(buttons,actions);
     if(buttons !== false && buttons !== null){
         if(!isArray(buttons)){
@@ -67,6 +68,7 @@ export default function showConfirm (p,cb){
         if(!alert && no !== false){
             no.text  = defaultStr(no.text,'Non');
             const {onPress} = no;
+            no.testID = testID+"_NoCancelButton";
             no.style = [{color:theme.colors.errorText,backgroundColor:theme.colors.error},no.style];
             no.onPress = (args)=>{
                 args = React.getOnPressArgs(args);
@@ -80,6 +82,7 @@ export default function showConfirm (p,cb){
         if(yes !== false){
             yes = defaultObj(yes,ok)
             yes.text = defaultStr(yes.text,alert?'OK':'Oui');
+            yes.testID = testID+"_YesOkButton";
             yes.style = [{color:theme.colors.primaryText,backgroundColor:theme.colors.primary},yes.style]
             const {onPress} = yes;
             yes.onPress = (args)=>{
@@ -98,7 +101,6 @@ export default function showConfirm (p,cb){
     if(confirm){
         alert = true;
     }
-    testID = defaultStr(testID,"RN_AlertDialogComponent");
     const messageContent = React.isValidElement(message,true)?<Label testID={testID+"_Message"} {...messageProps} style={[theme.styles.fs15,theme.styles.pb1,messageProps.style]} >{message}</Label> :null;
     if(alert){
         return Alert.alert({

package/src/components/Icon/Font.js

@@ -32,11 +32,11 @@ import Zocial from "@expo/vector-icons/Zocial";
  *      simple-line - pour l'iconSet SimpleLinesIcons
  *      zocial - pour l'iconSet Zocial
  */
-const FontIcon = React.forwardRef(({icon,name,testID,color,iconStyle,backgroundColor,style,...props},ref)=>{
+const FontIcon = React.forwardRef(({icon,name,testID,color,iconColor,iconStyle,backgroundColor,style,...props},ref)=>{
     icon = defaultStr(icon,name).trim();
     testID = defaultStr(testID,"RN_FontIconComponent");
     const fStyle = StyleSheet.flatten(style) || {};
-    color = theme.Colors.isValid(color)? color : fStyle.color || theme.colors.text;
+    color = theme.Colors.isValid(color)? color : Colors.isValid(iconColor)?iconColor : fStyle.color || theme.colors.text;
     backgroundColor = theme.Colors.isValid(backgroundColor)? backgroundColor : fStyle.backgroundColor || 'transparent';
     const isMaterial = isIcon(name,"material");
     const isFa = isIcon(name,"fa");
@@ -65,11 +65,11 @@ const FontIcon = React.forwardRef(({icon,name,testID,color,iconStyle,backgroundC
                     .ltrim("fa-").ltrim("ant-").ltrim("fontisto-")
                     .ltrim("foundation-").ltrim("ionic-").ltrim("octicons-")
                     .ltrim("simple-line-").ltrim("zocial-").trim();
-
     return <Icon {...props} 
         ref = {ref}
         testID = {testID}
         color={color}
+        iconColor = {iconColor}
         name = {iconName}
         backgroundColor = {backgroundColor}
     />

package/src/components/Icon/Icon.js

@@ -22,10 +22,12 @@ const IconComponentRef = React.forwardRef((props,ref)=>{
     if(button === false){
         flattenedStyle.borderRadius = 0;
     }
+    const iconColor = Colors.isValid(color) ? color : Colors.isValid(rest.iconColor)? rest.iconColor : Colors.isValid(flattenedStyle.color)? flattenedStyle.color : theme.colors.text
     return <Tooltip 
         animated 
         {...rest}  
-        color={Colors.isValid(color) ? color : Colors.isValid(flattenedStyle.color)? flattenedStyle.color : theme.colors.text} 
+        color={iconColor}
+        iconColor = {iconColor} 
         style = {flattenedStyle}
         Component={React.isComponent(Component)?Component:IconButton}
         ref = {ref}

package/src/components/Icon/IconButton.js

@@ -24,6 +24,7 @@ const IconButtonComponent = ({
   containerProps,
   style,
   testID,
+  color,
   ...rest
 }) => {
   const IconComponent = animated ? CrossFadeIcon : IconButton;
@@ -31,11 +32,11 @@ const IconButtonComponent = ({
   containerProps = defaultObj(containerProps);
   const containerStyle = StyleSheet.flatten(containerProps.style) || {};
   const backgroundColor = Colors.isValid(containerColor)? containerColor : Colors.isValid(containerStyle.color) ? containerStyle.color : undefined;
-  const iconColor = Colors.isValid(customIconColor)? customIconColor : theme.colors.text;
+  const iconColor = Colors.isValid(customIconColor)? customIconColor : Colors.isValid(color)? color : theme.colors.text;
   const borderColor = theme.colors.outline || theme.colors.divider;
   const rippleColor = Colors.setAlpha(iconColor,0.32);
   const buttonSize =  size * 1.5;
-
+  console.log(iconColor, " is conndddd ",color,rest);
   const borderStyles = {
     borderWidth: 0,
     borderRadius: buttonSize / 2,

package/src/components/Menu/Menu.js

@@ -47,18 +47,9 @@ class _Menu extends AppComponent {
     statusBarHeight: APPROX_STATUSBAR_HEIGHT,
     overlayAccessibilityLabel: 'Close menu',
   };
-
-  static getDerivedStateFromProps1(nextProps, prevState) {
-    if (nextProps.visible && !prevState.rendered) {
-      return { rendered: true };
-    }
-
-    return null;
-  }
   constructor(props){
     super(props);
     extendObj(this.state,{
-      rendered: this.props.visible,
       top: 0,
       left: 0,
       menuLayout: { width: 0, height: 0 },
@@ -78,17 +69,13 @@ class _Menu extends AppComponent {
   componentWillUnmount() {
     super.componentWillUnmount();
     this.removeListeners();
+    this.menu = null;
+    this.anchor = null;
   }
 
   anchor = null;
-  menu = null;
   backHandlerSubscription;
 
-  isCoordinate = (anchor) =>
-    !React.isValidElement(anchor) &&
-    typeof anchor?.x === 'number' &&
-    typeof anchor?.y === 'number';
-
   measureMenuLayout = () =>
     new Promise((resolve) => {
       if (this.menu) {
@@ -100,12 +87,6 @@ class _Menu extends AppComponent {
 
   measureAnchorLayout = () =>
     new Promise((resolve) => {
-      const { anchor } = this.props;
-      if (this.isCoordinate(anchor)) {
-        resolve({ x: anchor.x, y: anchor.y, width: 0, height: 0 });
-        return;
-      }
-
       if (this.anchor) {
         this.anchor.measureInWindow((x, y, width, height) => {
           resolve({ x, y, width, height });
@@ -143,9 +124,11 @@ class _Menu extends AppComponent {
   };
 
   handleDismiss = () => {
-    if (this.props.visible) {
-      this.props.onDismiss();
-    }
+    this.hide(()=>{
+      if (this.props.visible) {
+        this.props.onDismiss();
+      }
+    });
     return true;
   };
 
@@ -198,8 +181,8 @@ class _Menu extends AppComponent {
       !windowLayout.height ||
       !menuLayout.width ||
       !menuLayout.height ||
-      (!anchorLayout.width && !this.isCoordinate(this.props.anchor)) ||
-      (!anchorLayout.height && !this.isCoordinate(this.props.anchor))
+      (!anchorLayout.width) ||
+      (!anchorLayout.height)
     ) {
       requestAnimationFrame(this.show);
       return;
@@ -244,7 +227,7 @@ class _Menu extends AppComponent {
     );
   };
 
-  hide = () => {
+  hide = (cb) => {
     this.removeListeners();
     if(!this._isMounted()) return;
     const animation = theme.animation;
@@ -255,7 +238,7 @@ class _Menu extends AppComponent {
       useNativeDriver: true,
     }).start(({ finished }) => {
       if (finished) {
-        this.setState({ menuLayout: { width: 0, height: 0 }, rendered: false });
+        this.setState({ menuLayout: { width: 0, height: 0 }},(e)=>{if(typeof cb ==='function') cb();});
         this.state.scaleAnimation.setValue({ x: 0, y: 0 });
         this.focusFirstDOMNode(this.anchor);
       }
@@ -283,8 +266,8 @@ class _Menu extends AppComponent {
       opacityAnimation,
       scaleAnimation,
     } = this.state;
-    const rendered = visible;
     const minWidth = defaultDecimal(customMinWidth);
+    const rendered = this.props.visible;
     let { left, top } = this.state;
 
     // I don't know why but on Android measure function is wrong by 24
@@ -458,7 +441,7 @@ class _Menu extends AppComponent {
     
     //- (sameWidth ? anchorLayout.height  : 0)
     const positionStyle = {
-      top: this.isCoordinate(anchor) ? top : top + additionalVerticalValue,
+      top: top + additionalVerticalValue,
       ...(I18nManager.isRTL ? { right: left } : { left }),
     };
     if(sameWidth){
@@ -474,8 +457,9 @@ class _Menu extends AppComponent {
       positionStyle.top = SCREEN_INDENT;
     }
     const maxMenuHeight = windowLayout.height - top - SCREEN_INDENT;
-    const maxHeight = maxMenuHeight >=0 ? Math.max(Math.min(maxMenuHeight,menuLayout.height),150)  : windowLayout.height - SCREEN_INDENT*2;
+    const maxHeight = maxMenuHeight >=0 ? Math.max(Math.max(maxMenuHeight,menuLayout.height),150)  : windowLayout.height - SCREEN_INDENT*2;
     const contentContainerStyle = maxMenuHeight > SCREEN_INDENT ? {maxHeight} : undefined;
+    const hiddenStyle = !rendered ? {display:'none',width:0,opacity:0} : null;
     return (
       <View
         testID = {testID}
@@ -485,17 +469,18 @@ class _Menu extends AppComponent {
         collapsable={false}
         style = {{backgroundColor:'transparent'}}
       >
-        {this.isCoordinate(anchor) ? null : anchor}
-        {rendered ? (
+        {anchor}
+        {true ? (
           <Portal>
-            <TouchableWithoutFeedback
+            {rendered ? <TouchableWithoutFeedback
               testID={testID+"_TouchableWithoutFeedBack"}
               accessibilityLabel={overlayAccessibilityLabel}
               accessibilityRole="button"
               onPress={onDismiss}
+              style = {[hiddenStyle]}
             >
               <View style={[StyleSheet.absoluteFill,{flex:1,backgroundColor:'transparent'}]} testID={testID+"_Backdrop"} />
-            </TouchableWithoutFeedback>
+            </TouchableWithoutFeedback>:null}
             <View
               testID = {testID+"_ContentContainer"}
               ref={(ref) => {
@@ -503,11 +488,11 @@ class _Menu extends AppComponent {
               }}
               collapsable={false}
               accessibilityViewIsModal={visible}
-              style={[styles.wrapper, positionStyle, style]}
+              style={[styles.wrapper, positionStyle, style,hiddenStyle]}
               pointerEvents={visible ? 'box-none' : 'none'}
               onAccessibilityEscape={onDismiss}
             >
-              <Animated.View style={{ transform: positionTransforms }} testID={testID+"_Animated"}>
+              {rendered?<Animated.View style={{ transform: positionTransforms }} testID={testID+"_Animated"}>
                 <Surface
                   elevation = {5}
                   testID= {testID+"_Content"}
@@ -525,7 +510,7 @@ class _Menu extends AppComponent {
                   {((scrollableMenuHeight|| contentContainerStyle) && (<ScrollView contentContainerStyle={contentContainerStyle} testID={testID+"_ScrollView"}>{children}</ScrollView>
                   )) || children}
                 </Surface>
-              </Animated.View>
+              </Animated.View> : null}
             </View>
           </Portal>
         ) : null}

package/src/components/Menu/index.js

@@ -73,7 +73,7 @@ const MenuComponent = React.forwardRef((props,ref)=>{
         console.error("unable to render menu, anchor not spécified for props",props);
     }
     const context = {openMenu,closeMenu,open:openMenu,close:closeMenu};
-    React.setRef(ref,context);
+    //React.setRef(ref,context);
     if(typeof children =='function'){
         children = children({openMenu,closeMenu,context});
     }
@@ -81,8 +81,17 @@ const MenuComponent = React.forwardRef((props,ref)=>{
         return ()=>{
             React.setRef(ref,null);
         }
-    },[])
-    return  <Menu {...menuProps} testID={testID} visible={visible} onDismiss={closeMenu} anchor={anchor}>
+    },[]);
+    return  <Menu {...menuProps} ref={(el)=>{
+        if(el){
+            for(let i in context){
+                if(!(i in el)){
+                    el[i] = context[i];
+                }
+            }
+        }
+        React.setRef(ref,el);
+    }} testID={testID} visible={visible} onDismiss={closeMenu} anchor={anchor}>
         {renderItems({...props,onPressItem,renderItem,openMenu,closeMenu})}
         {React.isValidElement(children)? children: null}
     </Menu>

package/src/components/Menu/utils.js

@@ -7,7 +7,7 @@ import Expandable from "$ecomponents/Expandable";
 import {cursorPointer} from "$theme";
 import Item from "./Item";
 
-export const MIN_WIDTH = 160;
+export const MIN_WIDTH = 180;
 
 export const renderItems = (props)=>{
     let _items = [];

package/src/components/Modal/index.js

@@ -4,7 +4,6 @@ import {
   StyleSheet,
   View,
   TouchableWithoutFeedback,
-  Animated,
 } from 'react-native';
 import PropTypes from "prop-types";
 import theme,{StyleProp} from "$theme";

package/src/components/Tooltip/index.js

@@ -13,7 +13,6 @@ export const positions = {top:"top",right:"right",bottom:"bottom",left:"left"}
 
 const TooltipComponent = React.forwardRef((props,ref)=>{
     let {tooltipProps,position,Component,children,strictPosition,...rest} = props;
-    rest = defaultObj(rest);
     tooltipProps = defaultObj(tooltipProps);
     Component = React.isComponent(tooltipProps.Component) ? tooltipProps.Component : React.isComponent(Component) ? Component : Label;
     delete tooltipProps.position;

package/src/components/Dialog/confirm/Alert/Alert.old/Alert.web.js

@@ -1,360 +0,0 @@
-import {uniqid,defaultStr,defaultObj} from "$utils";
-import {addClassName, removeClassName} from "$utils/dom";
-import theme from "$theme";
-import {MAX_WIDTH} from "$ecomponents/Dialog/utils";
-import {Elevations} from "$ecomponents/Surface";
-import { StyleSheet } from "react-native";
-import {Dimensions} from "react-native";
-const domId = uniqid("alter-7-dom-id");
-(function (Alert7) {
-
-    var _TYPE_DEFAULT = 0;
-    var _TYPE_CONFIRM = 1;
-    (function () {
-        Alert7 = window.Alert7 = Alert7 || _getInitialClass();
-    }());
-
-    function _getInitialClass() {
-
-        Alert7Class.TYPE_DEFAULT = _TYPE_DEFAULT;
-        Alert7Class.TYPE_CONFIRM = _TYPE_CONFIRM;
-        Alert7Class.alert = _staticAlert;
-        Alert7Class.break = _staticBreak;
-        _appendCSS();
-        return Alert7Class;
-
-    }
-
-    function _staticAlert(_title, _message) {
-
-        var _tempAlert = new Alert7Class();
-        var _args = [].splice.call(arguments, 2);
-        _tempAlert.setTitle(_title);
-        _tempAlert.setMessage(_message);
-        while ( _args.length ) _tempAlert.addAction(_args.shift(), _args.shift());
-        _tempAlert.present();
-        return _tempAlert;
-
-    }
-
-    function _staticBreak() {
-
-        throw null;
-
-    }
-
-    function _appendCSS() {
-        let maxWidth = MAX_WIDTH;
-        const backgroundColor = theme.colors.surface+";",color=theme.colors.text+";";
-        const {width:windowWidth} = Dimensions.get("window");
-        if(typeof windowWidth <= maxWidth){
-            maxWidth = windowWidth*90/100;
-        }
-        var _styleElement = document.getElementById(domId);
-        if(!_styleElement){
-            _styleElement = document.createElement("style");
-            document.getElementsByTagName("head")[0].appendChild(_styleElement);
-        }
-        _styleElement.id = domId;
-        _styleElement.innerHTML = "" +
-            "#Alert7," +
-            "#Alert7::after," +
-            "#Alert7 .alert7-container {" +
-                "vertical-align: middle;" +
-            "}" +
-            "" +
-            "#Alert7 {" +
-                "position: fixed;" +
-                "top: 0;" +
-                "bottom: 0;" +
-                "left: 0;" +
-                "right: 0;" +
-                "z-index: 1001;" +
-                "background-color: " +theme.colors.backdrop+";"+
-                "text-align: center;" +
-                "font-size: 16px;" +
-                "-webkit-user-select: none;" +
-                "   -moz-user-select: none;" +
-                "    -ms-user-select: none;" +
-                "        user-select: none;" +
-            "}" +
-            "" +
-            "#Alert7.alert7-confirm {" +
-            "}" +
-            "" +
-            "#Alert7::after," +
-            "#Alert7 .alert7-container {" +
-                "display: inline-block;" +
-            "}" +
-            "" +
-            "#Alert7::after {" +
-                "height: 100%;" +
-                "content: '';" +
-            "}" +
-            "#Alert7 .alert7-container {" +
-                "min-width:240px;"+
-                "max-width: "+maxWidth+(typeof maxWidth =='number'? "px":"")+";" +
-                "width: auto;" +
-                "box-sizing: border-box;" +
-                "background-color:"+backgroundColor+
-                "border-radius: 0px;" +
-                "max-height: calc(100% - 64px);"+
-                "overflow-y: auto;"+
-                "color:"+color+
-                "box-shadow:rgb(0 0 0 / 20%) 0px 11px 15px -7px, rgb(0 0 0 / 14%) 0px 24px 38px 3px, rgb(0 0 0 / 12%) 0px 9px 46px 8px"+
-            "}" +
-            "" +
-            "#Alert7 .alert7-title," +
-            "#Alert7 .alert7-message {" +
-                "font-family: Roboto, Helvetica, Arial, sans-serif;"+
-                "line-height: 1.6;"+
-                "letter-spacing: 0.0075em;"+
-                "padding:10px;"+
-                "text-align:left;"+
-            "}" +
-            "" +
-            "#Alert7 .alert7-title {" +
-                "font-size: 1.1em;" +
-                "font-weight: bolder;" +
-                //"line-height: 2rem;" +
-            "}" +
-            "" +
-            "#Alert7 .alert7-message {" +
-                "padding-bottom: 14px;" +
-                "font-size: 0.9em;" +
-            "}" +
-            "" +
-            "#Alert7 .alert7-actions {" +
-                "width:100%;"+
-                "text-align:right;"+
-                "padding-bottom:7px"+
-            "}" +
-            "" +
-            "#Alert7 .alert7-actions button.alert7-action-item {" +
-                "display: inline-block;"+
-                "position: relative;"+
-                "box-sizing: border-box;"+
-                "-webkit-tap-highlight-color: transparent;"+
-                "background-color: transparent;"+
-                "outline: 0px;"+
-                "border: 0px;"+
-                "margin: 0px;"+
-                "cursor: pointer;"+
-                "user-select: none;"+
-                "vertical-align: middle;"+
-                "appearance: none;"+
-                "text-decoration: none;"+
-                "font-family: Roboto, Helvetica, Arial, sans-serif;"+
-                "font-weight: 500;"+
-                "font-size: 0.875rem;"+
-                "line-height: 1.75;"+
-                "letter-spacing: 0.02857em;"+
-                "text-transform: uppercase;"+
-                "min-width: 64px;"+
-                "padding: 6px 8px;"+
-                "margin-right:7px;"+
-                "margin-bottom:4px;"+
-                "border-radius: 4px;"+
-                "transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"+
-            "}" +
-            "" +
-            "#Alert7.alert7-confirm .alert7-actions button.alert7-action-item:first-of-type:last-of-type {" +
-                "width: 100%;" +
-            "}" +
-            "" +
-            "#Alert7.alert7-confirm .alert7-actions button.alert7-action-item:nth-of-type(n+3) {" +
-                "display: none;" +
-            "}" +
-            "@media only screen and (min-width: "+(MAX_WIDTH)+"px) {"+
-                "#Alert7 .alert7-container {"+
-                    "max-width:"+(MAX_WIDTH-20)+"px!important;"+
-                "}"+
-            "}"+
-            "@media only screen and (max-width: "+MAX_WIDTH+"px) {"+
-                "#Alert7 .alert7-container {"+
-                    "max-width:90%!important;"+
-                "}"+
-             "}"+
-            "";
-    }
-
-    function Alert7Class() {
-
-        this.title = "";
-        this.message = "";
-        this.type = _TYPE_DEFAULT;
-        this.actions = [];
-        _createAlertElement(this);
-
-    }
-
-    function _createAlertElement(_self) {
-
-        _self.instanceElement = document.createElement("div");
-        _self.instanceElement.id = "Alert7";
-        _self.alertElement = document.createElement("div");
-        _self.alertElement.className = "alert7-container";
-        _self.instanceElement.appendChild(_self.alertElement);
-        _self.titleElement = document.createElement("div");
-        _self.titleElement.className = "alert7-title";
-        _self.alertElement.appendChild(_self.titleElement);
-        _self.messageElement = document.createElement("div");
-        _self.messageElement.className = "alert7-message";
-        _self.alertElement.appendChild(_self.messageElement);
-        _self.actionsElement = document.createElement("div");
-        _self.actionsElement.className = "alert7-actions";
-        _self.alertElement.appendChild(_self.actionsElement);
-
-    }
-
-    Alert7Class.prototype.setTitle = function (_text) {
-
-            this.title = _text || "";
-
-        };
-
-    Alert7Class.prototype.setMessage = function (_text) {
-        this.message = _text || "";
-    };
-
-    Alert7Class.prototype.setType = function (_enum) {
-
-            this.type = _enum || _TYPE_DEFAULT;
-
-        };
-
-    Alert7Class.prototype.addAction = function (_text, _handler) {
-
-            this.actions.push({
-                text: _text,
-                handler: _handler
-            });
-
-        };
-
-    Alert7Class.prototype.present = function () {
-        this.titleElement.innerText = this.titleElement.textContent = this.title;
-        const isDark = theme.isDark();
-        _appendCSS();
-        removeClassName(this.titleElement,"alert7-title");
-        if(typeof this.title =="string" && this.title.length){
-            addClassName(this.titleElement,"alert7-title");
-            this.titleElement.style.background = isDark?theme.colors.surface : theme.colors.primary;
-            this.titleElement.style.color = isDark?theme.colors.surfaceText : theme.colors.primaryText;
-            this.titleElement.style.borderBottom = "1px solid "+theme.colors.divider;
-        }
-        this.messageElement.innerHTML = this.messageElement.textContent = defaultStr(this.message).replaceAll("\n","</br>");
-        switch ( this.type ) {
-            case _TYPE_CONFIRM: this.instanceElement.classList.add("alert7-confirm");
-        }
-        if ( !this.actions.length ) this.actions.push({});
-        _createActions(this);
-        document.querySelector("body").appendChild(this.instanceElement);
-
-    };
-
-    Alert7Class.prototype.dismiss = function () {
-
-            if ( !this.instanceElement.parentNode ) return;
-            this.instanceElement.parentNode.removeChild(this.instanceElement);
-
-        };
-
-    function _createActions(_self) {
-
-        var _actions = _self.actions;
-        var _numOfAction = _actions.length;
-        var _tempActionElement;
-        var _datum;
-        _self.actionsElement.innerHTML = "";
-        while ( _numOfAction-- ) {
-            _datum = _actions[_numOfAction];
-            const button = _datum.text;
-            if(typeof button =="text"){
-                button = {text:button};
-            } else button = defaultObj(button);
-            const text = defaultStr(button.text,button.label); 
-            if(!text) _numOfAction--;
-            _tempActionElement = document.createElement("button");
-            _tempActionElement.className = "alert7-action-item";
-            _tempActionElement.innerText = _tempActionElement.textContent = text;// _datum.text || "OK";
-            const stylesInput = StyleSheet.flatten(button.style);
-            const style = _tempActionElement.style;
-            for(let i in stylesInput){
-                if(style.hasOwnProperty(i)){
-                    style[i] = stylesInput[i];
-                }
-            }
-            _tempActionElement.addEventListener("click", _onClick(_datum.handler), false);
-            _self.actionsElement.insertBefore(_tempActionElement, _self.actionsElement.firstChild);
-        }
-
-        function _onClick(_handler) {
-            return function () {
-                    try {
-                        if ( _handler ) _handler();
-                        _self.dismiss();
-                    } catch (_error) {}
-                };
-        }
-
-    }
-
-}(window.Alert7));
-
-function escapeHTML(string) {
-  let pre = document.createElement('pre');
-  let text = document.createTextNode(string);
-  pre.appendChild(text);
-  return pre.innerHTML;
-}
-
-const Alert = {
-  alert(title, message='', callbackOrButtons=[{text:'OK', onPress : (f) => f}]) {
-    let alert = new Alert7();
-    alert.setTitle(title);
-    alert.setMessage(escapeHTML(message));
-    if (typeof callbackOrButtons === 'function') {
-      const callback = callbackOrButtons;
-      alert.addAction('OK', callback);
-    } else {
-      const buttons = callbackOrButtons;
-      buttons.forEach((button) => {
-        alert.addAction(button, button.onPress || (f=>f));
-      });
-      if (buttons.length === 2) {
-        alert.setType(Alert7.TYPE_CONFIRM);
-      }
-    }
-    alert.present();
-  },
-
-  prompt(title, message='', callbackOrButtons=(f) => f, type='plain-text', defaultValue='') {
-    const alertPromptId = uniqid('alert7-prompt-input')
-    function getInputCallback(callback) {
-      return () => {
-        const text = document.getElementById(alertPromptId).value;
-        return callback(text);
-      };
-    }
-
-    let alert = new Alert7();
-    alert.setTitle(title);
-    const msg = `<br/><input type="${(type==='secure-text'||type==='login-password')?'password':'text'}" value="${defaultValue}" id=${alertPromptId} style="width: 100%; height: 18px; border: 1px solid #ccc;" />`;
-    alert.setMessage(escapeHTML(message) + msg);
-    if (typeof callbackOrButtons === 'function') {
-      const callback = callbackOrButtons;
-      alert.addAction('OK', getInputCallback(callback));
-    } else {
-      const buttons = callbackOrButtons;
-      buttons.forEach((button) => {
-        alert.addAction(button, getInputCallback(button.onPress || (f=>f)));
-      });
-      if (buttons.length === 2) {
-        alert.setType(Alert7.TYPE_CONFIRM);
-      }
-    }
-    alert.present();
-  }
-};
-export default Alert;

package/src/components/Dialog/confirm/Alert/Alert.old/index.js

@@ -1,2 +0,0 @@
-import { Alert as RNAlert} from "react-native";
-export default RNAlert;