react-native-ui-lib 7.41.1 → 7.42.0-snapshot.6978

package/lib/components/Keyboard/KeyboardInput/TextInputKeyboardManager/TextInputKeyboardManager.ios.js

@@ -45,7 +45,7 @@ export default class TextInputKeyboardManager {
   };
 }
 function findNodeHandle(ref) {
-  return ReactNative.findNodeHandle(ref.current || ref);
+  return ref.current?.getNodeHandle?.() || ref?.getNodeHandle?.() || ReactNative.findNodeHandle(ref.current || ref);
 }
 const springAnimation = {
   duration: 400,

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
   "main": "components/index",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.41.1",
+  "version": "7.42.0-snapshot.6978",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/searchInput.d.ts

@@ -0,0 +1,2 @@
+import {SearchInput} from './src';
+export default SearchInput;

package/searchInput.js

@@ -0,0 +1 @@
+module.exports = require('./src/components/searchInput').default;

package/src/components/button/button.api.json

@@ -237,89 +237,12 @@
           },
           {
             "type": "section",
-            "title": "Main Button",
+            "title": "Button",
             "description": ""
           },
           {
             "type": "table",
-            "columns": ["Property", "Component"],
-            "items": [
-              {
-                "title": "Primary",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_priority_primary.png"
-                  }
-                ]
-              },
-              {
-                "title": "Secondary",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_priority_secondary.png"
-                  }
-                ]
-              }
-            ],
-            "title": "",
-            "description": "",
-            "name": "Priority"
-          },
-          {
-            "type": "table",
-            "columns": ["Property", "Primary", "Secondary"],
-            "items": [
-              {
-                "title": "Main",
-                "description": "The default button style, used for most actions.",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_mainPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_mainSecondary.png"
-                  }
-                ]
-              },
-              {
-                "title": "Inverted",
-                "description": "Used on top of images and dark background. ",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_invertedPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_invertedSecondary.png"
-                  }
-                ]
-              },
-              {
-                "title": "Destructive",
-                "description": "Used for destructive actions such as Delete and Log out. ",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_distructivePrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_distructiveSecondary.png"
-                  }
-                ]
-              }
-            ],
-            "title": "",
-            "description": "",
-            "name": "Presets"
-          },
-          {
-            "type": "section",
-            "title": "States",
-            "description": ""
-          },
-          {
-            "type": "table",
-            "columns": ["Property", "Primary", "Secondary"],
+            "columns": ["Property", "Default", "Outline"],
             "items": [
               {
                 "title": "Active",
@@ -333,18 +256,6 @@
                   }
                 ]
               },
-              {
-                "title": "Loading",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_mainLoadingPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_mainLoadingSecondary.png"
-                  }
-                ]
-              },
               {
                 "title": "Disabled",
                 "description": "",
@@ -362,51 +273,6 @@
             "description": "",
             "name": "Main"
           },
-          {
-            "type": "table",
-            "columns": ["Property", "Primary", "Secondary"],
-            "items": [
-              {
-                "title": "Active",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_invertedActivePrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_invertedActiveSecondary.png"
-                  }
-                ]
-              },
-              {
-                "title": "Loading",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_invertedLoadingPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_invertedLoadingSecondary.png"
-                  }
-                ]
-              },
-              {
-                "title": "Disabled",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_invertedDisabledPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_invertedDisabledSecondary.png"
-                  }
-                ]
-              }
-            ],
-            "title": "",
-            "description": "",
-            "name": "Inverted"
-          },
           {
             "type": "table",
             "columns": ["Property", "Component"],
@@ -478,7 +344,7 @@
             "columns": ["Property", "Component"],
             "items": [
               {
-                "title": "Primary",
+                "title": "Default",
                 "description": "",
                 "content": [
                   {
@@ -487,7 +353,7 @@
                 ]
               },
               {
-                "title": "Secondary",
+                "title": "Outline",
                 "description": "",
                 "content": [
                   {
@@ -499,37 +365,6 @@
             "title": "Priority",
             "description": ""
           },
-          {
-            "type": "table",
-            "columns": ["Property", "Primary", "Secondary"],
-            "items": [
-              {
-                "title": "Main",
-                "description": "The default button style, used for most actions.",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_presets_mainPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_presets_mainSecondary.png"
-                  }
-                ]
-              },
-              {
-                "title": "Inverted",
-                "description": "Used on top of images and dark background. ",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_presets_invertedPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_presets_invertedSecondary.png"
-                  }
-                ]
-              }
-            ],
-            "title": "Presets"
-          },
           {
             "type": "section",
             "title": "States",
@@ -537,7 +372,7 @@
           },
           {
             "type": "table",
-            "columns": ["Property", "Primary", "Secondary"],
+            "columns": ["Property", "Default", "Outline"],
             "items": [
               {
                 "title": "Active",
@@ -596,15 +431,6 @@
                   }
                 ]
               },
-              {
-                "title": "Destructive",
-                "description": "text style: bodyBold, $textDangerLight",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_linkButton_presets_distructive.png"
-                  }
-                ]
-              },
               {
                 "title": "Disabled",
                 "description": "text style: bodyBold, $textDisabled",
@@ -691,24 +517,6 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_fullWidth_presets_main.png"
                   }
                 ]
-              },
-              {
-                "title": "Destructive ",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_fullWidth_presets_destructive.png"
-                  }
-                ]
-              },
-              {
-                "title": "Premium",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_fullWidth_presets_premium.png"
-                  }
-                ]
               }
             ],
             "title": "Presets",

package/src/components/chip/chip.driver.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const ChipDriver: (props: ComponentProps) => {
+    getLabel: () => {
+        getText: () => string | (string | import("react-test-renderer").ReactTestInstance)[];
+        getStyle: () => import("react-native").TextStyle;
+        press: () => void;
+        hasOnPress: () => boolean;
+        onPressIn: () => void;
+        hasOnPressIn: () => boolean;
+        onPressOut: () => void;
+        hasOnPressOut: () => boolean;
+        onLongPress: () => void;
+        hasOnLongPress: () => boolean;
+        getElement: () => import("react-test-renderer").ReactTestInstance;
+        queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+        exists: () => boolean;
+    };
+    getDismissIcon: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        getElement: () => import("react-test-renderer").ReactTestInstance;
+        queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+    };
+    getIcon: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        getElement: () => import("react-test-renderer").ReactTestInstance;
+        queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+    };
+    getElement: () => import("react-test-renderer").ReactTestInstance;
+    queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+    exists: () => boolean;
+};

package/src/components/chip/chip.driver.js

@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native';
+import { useComponentDriver } from "../../testkit/new/Component.driver";
+import { TextDriver } from "../text/Text.driver.new";
+import { ImageDriver } from "../image/Image.driver.new";
+export const ChipDriver = props => {
+  const driver = useComponentDriver(props);
+  const labelDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.label`
+  });
+  const dismissIconDriver = ImageDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.dismissIcon`
+  });
+  const iconDriver = ImageDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.icon`
+  });
+  const getLabel = () => {
+    return {
+      ...labelDriver
+    };
+  };
+  const getDismissIcon = () => {
+    const exists = () => {
+      return dismissIconDriver.exists();
+    };
+    const getStyle = () => {
+      return StyleSheet.flatten(dismissIconDriver.getElement().props.style);
+    };
+    return {
+      ...dismissIconDriver,
+      exists,
+      getStyle
+    };
+  };
+  const getIcon = () => {
+    const exists = () => {
+      return iconDriver.exists();
+    };
+    const getStyle = () => {
+      return StyleSheet.flatten(iconDriver.getElement().props.style);
+    };
+    return {
+      ...iconDriver,
+      exists,
+      getStyle
+    };
+  };
+  return {
+    ...driver,
+    getLabel,
+    getDismissIcon,
+    getIcon
+  };
+};

package/src/components/index.js

@@ -137,6 +137,9 @@ export default {
   get ProgressiveImage() {
     return require('./progressiveImage').default;
   },
+  get SearchInput() {
+    return require('./searchInput').default;
+  },
   get StateScreen() {
     return require('./stateScreen').default;
   },

package/src/components/picker/Picker.driver.new.d.ts

@@ -7,5 +7,37 @@ export declare const PickerDriver: (props: ComponentProps, useDialog: boolean) =
     done: () => void;
     isOpen: () => boolean;
     dismissDialog: () => void;
+    itemDriver: (testID: string) => {
+        press: () => void;
+        hasOnPress: () => boolean;
+        onPressIn: () => void;
+        hasOnPressIn: () => boolean;
+        onPressOut: () => void;
+        hasOnPressOut: () => boolean;
+        onLongPress: () => void;
+        hasOnLongPress: () => boolean;
+        getElement: () => import("react-test-renderer").ReactTestInstance;
+        queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+        exists: () => boolean;
+        getStyle: () => any;
+        getLabel: () => {
+            getText: () => string | (string | import("react-test-renderer").ReactTestInstance)[];
+            getStyle: () => import("react-native/types").TextStyle;
+            press: () => void;
+            hasOnPress: () => boolean;
+            onPressIn: () => void;
+            hasOnPressIn: () => boolean;
+            onPressOut: () => void;
+            hasOnPressOut: () => boolean;
+            onLongPress: () => void;
+            hasOnLongPress: () => boolean;
+            getElement: () => import("react-test-renderer").ReactTestInstance;
+            queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+            exists: () => boolean;
+        };
+        getLabelStyle: () => import("react-native/types").TextStyle;
+        getIconStyle: () => any;
+        getIcon: () => import("../../testkit/new/Component.driver").ComponentDriverResult;
+    };
     selectItem: (testID: string) => void;
 };

package/src/components/picker/Picker.driver.new.js

@@ -54,12 +54,13 @@ export const PickerDriver = (props, useDialog) => {
       dialogDriver.pressOnBackground();
     }
   };
+  const itemDriver = testID => ButtonDriver({
+    renderTree: props.renderTree,
+    testID
+  });
   const selectItem = testID => {
-    const itemDriver = ButtonDriver({
-      renderTree: props.renderTree,
-      testID
-    });
-    itemDriver.press();
+    const driver = itemDriver(testID);
+    driver.press();
   };
   return {
     exists,
@@ -69,6 +70,7 @@ export const PickerDriver = (props, useDialog) => {
     done,
     isOpen,
     dismissDialog,
+    itemDriver,
     selectItem
   };
 };

package/src/components/picker/helpers/useNewPickerProps.js

@@ -13,23 +13,27 @@ const useNewPickerProps = props => {
     renderHeader,
     renderOverlay
   } = props;
-  const modalProps = {
+  const defaultModalProps = {
     animationType: 'slide',
     transparent: Constants.isIOS && enableModalBlur,
     enableModalBlur: Constants.isIOS && enableModalBlur,
     onRequestClose: topBarProps?.onCancel
   };
+  const mergedModalProps = {
+    ...defaultModalProps,
+    ...(onShow && {
+      onShow
+    }),
+    ...pickerModalProps,
+    ...customPickerProps?.modalProps
+  };
   const newProps = {
     renderHeader: renderCustomDialogHeader || renderHeader,
     renderInput: renderPicker || renderInput,
     renderOverlay: renderCustomModal || renderOverlay,
     customPickerProps: {
-      modalProps: {
-        onShow,
-        ...modalProps,
-        ...pickerModalProps
-      },
-      ...customPickerProps
+      ...customPickerProps,
+      modalProps: mergedModalProps
     }
   };
   return newProps;

package/src/components/searchInput/index.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SearchInputPresets, SearchInputProps, SearchInputRef } from './types';
+declare const SearchInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    onClear?: (() => void) | undefined;
+    onDismiss?: (() => void) | undefined;
+    cancelButtonProps?: import("../button").ButtonProps | undefined;
+    customRightElement?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    showLoader?: boolean | undefined;
+    loaderProps?: import("react-native").ActivityIndicatorProps | undefined;
+    customLoader?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    invertColors?: boolean | undefined;
+    inaccessible?: boolean | undefined;
+    useSafeArea?: boolean | undefined;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    containerStyle?: import("react-native").StyleProp<import("react-native").TextStyle | import("react-native").ViewStyle>;
+    preset?: "default" | "prominent" | SearchInputPresets | undefined;
+} & React.RefAttributes<any>>;
+interface StaticMembers {
+    presets: typeof SearchInputPresets;
+}
+export { SearchInput, SearchInputProps, SearchInputRef, SearchInputPresets };
+declare const _default: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    onClear?: (() => void) | undefined;
+    onDismiss?: (() => void) | undefined;
+    cancelButtonProps?: import("../button").ButtonProps | undefined;
+    customRightElement?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    showLoader?: boolean | undefined;
+    loaderProps?: import("react-native").ActivityIndicatorProps | undefined;
+    customLoader?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    invertColors?: boolean | undefined;
+    inaccessible?: boolean | undefined;
+    useSafeArea?: boolean | undefined;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    containerStyle?: import("react-native").StyleProp<import("react-native").TextStyle | import("react-native").ViewStyle>;
+    preset?: "default" | "prominent" | SearchInputPresets | undefined;
+} & React.RefAttributes<any>> & StaticMembers;
+export default _default;