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

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.6974",
   "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/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;

package/src/components/searchInput/index.js

@@ -0,0 +1,218 @@
+import _isEmpty from "lodash/isEmpty";
+import React, { useImperativeHandle, forwardRef, useEffect, useRef, useState } from 'react';
+import { StyleSheet, Animated, TextInput, ActivityIndicator } from 'react-native';
+import { SearchInputPresets, SearchInputProps, SearchInputRef } from "./types";
+import { Colors, BorderRadiuses, Spacings, Typography } from "../../style";
+import { Constants, asBaseComponent } from "../../commons/new";
+import Button from "../button";
+import Icon from "../icon";
+import View from "../view";
+import Assets from "../../assets";
+const ICON_SIZE = 24;
+const INPUT_HEIGHT = 60;
+const TOP_INPUT_HEIGHT = Constants.isIOS ? 40 : 56;
+const PROMINENT_INPUT_HEIGHT = 48;
+const INVERTED_TEXT_COLOR = Colors.$textDefaultLight;
+const INVERTED_ICON_COLOR = Colors.$iconDefaultLight;
+const HIT_SLOP_VALUE = 20;
+const SearchInput = forwardRef((props, ref) => {
+  const {
+    preset = SearchInputPresets.DEFAULT,
+    onDismiss,
+    useSafeArea,
+    invertColors,
+    testID,
+    showLoader,
+    loaderProps,
+    value: controlledValue,
+    onChangeText,
+    onClear,
+    containerStyle,
+    customRightElement,
+    style,
+    inaccessible
+  } = props;
+  const currentAnimatedValue = useRef();
+  const searchInputRef = useRef(null);
+  const [hasValue, setHasValue] = useState(Boolean(controlledValue));
+  const [value, setValue] = useState(controlledValue);
+  const [valueState] = useState(new Animated.Value(_isEmpty(controlledValue) ? 0 : 1));
+  const [isAnimatingClearButton, setIsAnimatingClearButton] = useState(!_isEmpty(controlledValue));
+  useImperativeHandle(ref, () => {
+    return {
+      blur: () => searchInputRef.current?.blur(),
+      focus: () => searchInputRef.current?.focus(),
+      clear: () => {
+        searchInputRef.current?.clear();
+        onChangeText?.('');
+        onClear?.();
+      }
+    };
+  });
+  useEffect(() => {
+    if (controlledValue !== value) {
+      setValue(controlledValue);
+      setHasValue(Boolean(controlledValue));
+    }
+  }, [controlledValue]);
+  useEffect(() => {
+    if (hasValue) {
+      animatedValueState(1);
+    } else {
+      animatedValueState(0);
+    }
+  }, [hasValue]);
+  useEffect(() => {
+    return () => {
+      currentAnimatedValue.current?.stop();
+    };
+  }, []);
+  const animatedValueState = value => {
+    setIsAnimatingClearButton(true);
+    if (currentAnimatedValue.current) {
+      currentAnimatedValue.current.stop();
+    }
+    currentAnimatedValue.current = Animated.timing(valueState, {
+      toValue: value,
+      duration: 160,
+      useNativeDriver: true
+    });
+    currentAnimatedValue.current.start(() => {
+      if (!hasValue) {
+        setIsAnimatingClearButton(false);
+      }
+    });
+  };
+  const getHeight = () => {
+    const isProminent = preset === SearchInputPresets.PROMINENT;
+    if (isProminent) {
+      return PROMINENT_INPUT_HEIGHT;
+    }
+    return useSafeArea ? TOP_INPUT_HEIGHT : INPUT_HEIGHT;
+  };
+  const onChangeTextHandler = text => {
+    console.log(`onChangeTextHandler, text:`, text);
+    onChangeText?.(text);
+    setValue(text);
+    setHasValue(!_isEmpty(text));
+  };
+  const clearInput = () => {
+    searchInputRef?.current?.clear();
+    onChangeTextHandler('');
+    onClear?.();
+  };
+  const renderClearButton = () => {
+    const transform = [{
+      translateY: valueState.interpolate({
+        inputRange: [0, 1],
+        outputRange: [50, 1]
+      })
+    }];
+    const clearButtonStyle = !isDismissible() && isAnimatingClearButton && styles.clearButton;
+    const iconStyle = {
+      tintColor: invertColors ? INVERTED_ICON_COLOR : Colors.grey40,
+      width: 12,
+      height: 12
+    };
+    return <Animated.View style={[{
+      transform
+    }, clearButtonStyle]}>
+        <Button link grey10 text80 iconSource={Assets.internal.icons.x} iconStyle={iconStyle} onPress={clearInput} hitSlop={HIT_SLOP_VALUE} accessible={Boolean(hasValue)} accessibilityLabel={'clear'} testID={`${testID}.clearButton`} />
+      </Animated.View>;
+  };
+  const renderCancelButton = () => {
+    const {
+      cancelButtonProps
+    } = props;
+    if (onDismiss) {
+      return <Button style={styles.cancelButton} link color={invertColors ? INVERTED_TEXT_COLOR : undefined} $textDefault text65M {...cancelButtonProps} onPress={onDismiss} testID={`${testID}.cancelButton`} />;
+    }
+  };
+  const renderTextInput = () => {
+    const {
+      placeholder
+    } = props;
+    const height = getHeight();
+    const placeholderTextColor = invertColors ? INVERTED_TEXT_COLOR : Colors.$textDefault;
+    const selectionColor = invertColors ? INVERTED_TEXT_COLOR : Colors.$textDefault;
+    return <View style={[styles.inputContainer, {
+      height
+    }]}>
+        <TextInput accessibilityRole={'search'} placeholder={placeholder} placeholderTextColor={placeholderTextColor} underlineColorAndroid="transparent" selectionColor={selectionColor} ref={searchInputRef} value={value} allowFontScaling={false} style={[styles.input, containerStyle, invertColors && {
+        color: INVERTED_TEXT_COLOR
+      }, (!isDismissible() || isAnimatingClearButton) && styles.emptyInput]} onChangeText={onChangeTextHandler} testID={testID} />
+        {isAnimatingClearButton && renderClearButton()}
+        {isDismissible() && renderCancelButton()}
+        {!isDismissible() && customRightElement}
+      </View>;
+  };
+  const isDismissible = () => {
+    return typeof onDismiss !== 'undefined';
+  };
+  const renderIcon = (icon, left = true) => {
+    const invertedColor = invertColors ? {
+      tintColor: INVERTED_ICON_COLOR
+    } : undefined;
+    return <View>
+        <Icon tintColor={invertedColor?.tintColor} style={[styles.icon, invertedColor, left && styles.leftIcon]} source={icon} size={ICON_SIZE} />
+      </View>;
+  };
+  const renderLoader = () => {
+    const {
+      customLoader
+    } = props;
+    return <View>{customLoader ? customLoader : <ActivityIndicator style={styles.loader} {...loaderProps} />}</View>;
+  };
+  const topInputTopMargin = useSafeArea && {
+    marginTop: Constants.isIOS ? Constants.statusBarHeight : 0
+  };
+  const isProminent = preset === SearchInputPresets.PROMINENT;
+  return <View inaccessible={inaccessible} row centerV style={[style, isProminent && styles.prominentContainer, topInputTopMargin]} testID={`${testID}.searchBox`}>
+      {showLoader ? renderLoader() : renderIcon(Assets.internal.icons.search)}
+      {renderTextInput()}
+    </View>;
+});
+const styles = StyleSheet.create({
+  inputContainer: {
+    height: INPUT_HEIGHT,
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'hidden'
+  },
+  prominentContainer: {
+    borderWidth: 1,
+    borderColor: Colors.$outlineDefault,
+    borderRadius: BorderRadiuses.br20,
+    marginHorizontal: Spacings.s5
+  },
+  input: {
+    flex: 1,
+    ...Typography.body,
+    lineHeight: undefined,
+    color: Colors.$textDefault,
+    textAlign: Constants.isRTL ? 'right' : 'left'
+  },
+  emptyInput: {
+    marginRight: Spacings.s4
+  },
+  cancelButton: {
+    marginLeft: Spacings.s4,
+    marginRight: Spacings.s4
+  },
+  clearButton: {
+    marginRight: Spacings.s4
+  },
+  icon: {
+    marginRight: Spacings.s4
+  },
+  leftIcon: {
+    marginLeft: Spacings.s4
+  },
+  loader: {
+    marginHorizontal: Spacings.s4
+  }
+});
+SearchInput.displayName = 'SearchInput';
+export { SearchInput, SearchInputProps, SearchInputRef, SearchInputPresets };
+export default asBaseComponent(SearchInput);

package/src/components/searchInput/searchInput.api.json

@@ -0,0 +1,57 @@
+{
+  "name": "SearchInput",
+  "category": "form",
+  "description": "Search input for filtering purpose",
+  "example": "https://github.com/wix-private/wix-react-native-ui-lib/blob/master/example/screens/components/SearchInputScreen.tsx",
+  "extends": ["TextInput"],
+  "extendsLink": "https://reactnative.dev/docs/textinput",
+  "props": [
+    {"name": "onDismiss", "type": "() => void", "description": "callback for dismiss action"},
+    {"name": "onClear", "type": "() => void", "description": "On clear button callback."},
+    {
+      "name": "showLoader",
+      "type": "boolean",
+      "description": "Whether to show a loader instead of the left search icon."
+    },
+    {
+      "name": "customLoader",
+      "type": "React.ReactElement",
+      "description": "custom loader element to render instead of the default loader"
+    },
+    {
+      "name": "customRightElement",
+      "type": "React.ReactElement",
+      "description": "Custom right element"
+    },
+    {
+      "name": "cancelButtonProps",
+      "type": "ButtonProps",
+      "description": "Props for the cancel button"
+    },
+    {
+      "name": "schemeColor",
+      "type": "string | null",
+      "description": "The SearchInput colors (affects the search icon color and the cancel button color)"
+    },
+    {
+      "name": "inaccessible",
+      "type": "boolean",
+      "description": "Turn off accessibility for this view and its nested children"
+    },
+    {
+      "name": "useSafeArea",
+      "type": "boolean",
+      "description": "in case the SearchInput is rendered in a safe area (top of the screen)"
+    },
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Override styles for the input"},
+    {"name": "style", "type": "ViewStyle", "description": "Override styles for container"}
+  ],
+  "snippet": [
+    "<SearchInput",
+    "  ref={searchInputRef$1}",
+    "  testID={'searchInput'$2}",
+    "  placeholder={'Search'$3}",
+    "  onDismiss={onDismiss$4}",
+    "/>"
+  ]
+}

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

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+import { TextInputProps, StyleProp, ViewStyle, TextStyle, ActivityIndicatorProps } from 'react-native';
+import { ButtonProps } from '../button';
+export declare enum SearchInputPresets {
+    DEFAULT = "default",
+    PROMINENT = "prominent"
+}
+export interface SearchInputRef {
+    blur: () => void;
+    clear: () => void;
+    focus: () => void;
+}
+export type SearchInputProps = TextInputProps & {
+    /**
+     * On clear button callback.
+     */
+    onClear?: () => void;
+    /**
+     * callback for dismiss action
+     */
+    onDismiss?: () => void;
+    /**
+     * Props for the cancel button
+     */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * Custom right element
+     */
+    customRightElement?: React.ReactElement;
+    /**
+     * Whether to show a loader instead of the left search icon
+     */
+    showLoader?: boolean;
+    /**
+     * Loader props
+     */
+    loaderProps?: ActivityIndicatorProps;
+    /**
+     * custom loader element
+     */
+    customLoader?: React.ReactElement;
+    /**
+     * converts the colors of the search's input elements, icons and button to white
+     */
+    invertColors?: boolean;
+    /**
+     * Turn off accessibility for this view and its nested children
+     */
+    inaccessible?: boolean;
+    /**
+     * in case the SearchInput is rendered in a safe area (top of the screen)
+     */
+    useSafeArea?: boolean;
+    /**
+     * Override styles for container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Override styles for the input
+     */
+    containerStyle?: StyleProp<ViewStyle | TextStyle>;
+    /**
+     * The preset for the search input: default or prominent
+     */
+    preset?: SearchInputPresets | `${SearchInputPresets}`;
+};

package/src/components/searchInput/types.js

@@ -0,0 +1,5 @@
+export let SearchInputPresets = /*#__PURE__*/function (SearchInputPresets) {
+  SearchInputPresets["DEFAULT"] = "default";
+  SearchInputPresets["PROMINENT"] = "prominent";
+  return SearchInputPresets;
+}({});

package/src/components/tabController/apis/tabController.api.json

@@ -5,8 +5,17 @@
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
   "images": [],
   "props": [
-    {"name": "items", "type": "TabControllerItemProps[]", "description": "The list of tab bar items"},
-    {"name": "initialIndex", "type": "number", "description": "Initial selected index", "default": "0"},
+    {
+      "name": "items",
+      "type": "TabControllerItemProps[]",
+      "description": "The list of tab bar items"
+    },
+    {
+      "name": "initialIndex",
+      "type": "number",
+      "description": "Initial selected index",
+      "default": "0"
+    },
     {
       "name": "onChangeIndex",
       "type": "(index: number, prevIndex: number | null) => void",
@@ -25,7 +34,11 @@
       "note": "Does not work with asCarousel",
       "default": "false"
     },
-    {"name": "carouselPageWidth;", "type": "number", "description": "Pass for custom carousel page width"}
+    {
+      "name": "carouselPageWidth;",
+      "type": "number",
+      "description": "Pass for custom carousel page width"
+    }
   ],
   "snippet": [
     "<TabController items={[{label: 'First'}, {label: 'Second'}, {label: 'Third'}]$1}>",
@@ -75,7 +88,7 @@
             "items": [
               {
                 "title": "",
-                "description": "**Inactive Tab**\nText: BodySmall $textDefault\nBackground: $backgroundElevated  \n\n**Active Tab**\nText: BodySmallBold $textPrimary\nBackground: $backgroundElevated\nIndicator: $outlinePrimary  \n\n**Shadow**\nsh10\n\n**Dark Skin**\nText: BodySmall, System White\nBackground: System Grey10\nDivider: System Grey20",
+                "description": "markdown: **Inactive Tab**\nText: BodySmall $textDefault\nBackground: $backgroundElevated  \n\n**Active Tab**\nText: BodySmallBold $textPrimary\nBackground: $backgroundElevated\nIndicator: $outlinePrimary  \n\n**Shadow**\nsh10\n\n**Dark Skin**\nText: BodySmall, System White\nBackground: System Grey10\nDivider: System Grey20",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_styling.png"
@@ -88,7 +101,10 @@
           },
           {
             "type": "table",
-            "columns": ["Property", "Component"],
+            "columns": [
+              "Property",
+              "Component"
+            ],
             "items": [
               {
                 "title": "Counter Badge",

package/src/components/textField/useImperativeInputHandle.js

@@ -1,10 +1,12 @@
 import { useContext, useImperativeHandle, useRef } from 'react';
+import { findNodeHandle } from 'react-native';
 import FieldContext from "./FieldContext";
 const useImperativeInputHandle = (ref, props) => {
   const inputRef = useRef();
   const context = useContext(FieldContext);
   useImperativeHandle(ref, () => {
     return {
+      getNodeHandle: () => inputRef.current ? findNodeHandle(inputRef.current) : null,
       isFocused: () => inputRef.current?.isFocused(),
       focus: () => inputRef.current?.focus(),
       blur: () => inputRef.current?.blur(),

package/src/components/timeline/Line.d.ts

@@ -4,6 +4,7 @@ import { LineProps } from './types';
 type LinePropsInternal = LineProps & {
     top?: boolean;
     style?: ViewStyle;
+    testID?: string;
 };
 declare const Line: React.MemoExoticComponent<(props: LinePropsInternal) => React.JSX.Element>;
 export default Line;

package/src/components/timeline/Line.js

@@ -12,7 +12,8 @@ const Line = React.memo(props => {
     entry,
     top,
     style,
-    width = LINE_WIDTH
+    width = LINE_WIDTH,
+    testID
   } = props;
   const solidLineStyle = useMemo(() => {
     return [style, styles.line, {
@@ -27,14 +28,14 @@ const Line = React.memo(props => {
     if (entry) {
       return <View style={[styles.entryPoint, {
         backgroundColor: color
-      }]} />;
+      }]} testID={`${testID}.entryPoint`} />;
     }
   };
   const renderLine = () => {
     if (type === LineTypes.DASHED) {
-      return <Dash vertical color={color} containerStyle={dashedLineStyle} />;
+      return <Dash vertical color={color} containerStyle={dashedLineStyle} testID={testID} />;
     }
-    return <View style={solidLineStyle} />;
+    return <View style={solidLineStyle} testID={testID} />;
   };
   return <>
       {top && renderStartPoint()}

package/src/components/timeline/Point.d.ts

@@ -3,6 +3,7 @@ import { LayoutChangeEvent } from 'react-native';
 import { PointProps } from './types';
 type PointPropsInternal = PointProps & {
     onLayout?: (event: LayoutChangeEvent) => void;
+    testID?: string;
 };
 declare const Point: (props: PointPropsInternal) => React.JSX.Element;
 export default Point;

package/src/components/timeline/Point.js

@@ -20,7 +20,8 @@ const Point = props => {
     label,
     type,
     color,
-    onLayout
+    onLayout,
+    testID
   } = props;
   const pointStyle = useMemo(() => {
     const hasOutline = type === PointTypes.OUTLINE;
@@ -55,14 +56,14 @@ const Point = props => {
     const tintColor = removeIconBackground ? Colors.$iconDefault : Colors.$iconDefaultLight;
     const iconSize = removeIconBackground ? undefined : ICON_SIZE;
     if (icon) {
-      return <Icon tintColor={tintColor} {...iconProps} size={iconSize} source={icon} />;
+      return <Icon testID={`${testID}.icon`} tintColor={tintColor} {...iconProps} size={iconSize} source={icon} />;
     } else if (label) {
-      return <Text recorderTag={'unmask'} $textDefaultLight subtextBold color={labelColor}>
+      return <Text testID={`${testID}.label`} recorderTag={'unmask'} $textDefaultLight subtextBold color={labelColor}>
           {label}
         </Text>;
     }
   };
-  return <View center style={pointStyle} onLayout={onLayout}>
+  return <View center style={pointStyle} onLayout={onLayout} testID={testID}>
       {renderPointContent()}
     </View>;
 };

package/src/components/timeline/index.js

@@ -15,7 +15,8 @@ const Timeline = props => {
     topLine,
     bottomLine,
     point,
-    children
+    children,
+    testID
   } = themeProps;
   const [anchorMeasurements, setAnchorMeasurements] = useState();
   const [contentContainerMeasurements, setContentContainerMeasurements] = useState();
@@ -107,17 +108,17 @@ const Timeline = props => {
     });
   }, []);
   const renderTopLine = () => {
-    return <Line {...topLine} top style={topLineStyle} color={topLine ? topLine?.color || getStateColor(topLine?.state) : undefined} />;
+    return <Line testID={`${testID}.topLine`} {...topLine} top style={topLineStyle} color={topLine ? topLine?.color || getStateColor(topLine?.state) : undefined} />;
   };
   const renderBottomLine = () => {
     if (bottomLine) {
-      return <Line {...bottomLine} style={styles.bottomLine} color={bottomLine?.color || getStateColor(bottomLine?.state)} />;
+      return <Line testID={`${testID}.bottomLine`} {...bottomLine} style={styles.bottomLine} color={bottomLine?.color || getStateColor(bottomLine?.state)} />;
     }
   };
-  return <View row style={containerStyle}>
+  return <View row style={containerStyle} testID={testID}>
       <View style={styles.timelineContainer}>
         {renderTopLine()}
-        <Point {...point} onLayout={onPointLayout} color={point?.color || getStateColor(point?.state)} />
+        <Point {...point} onLayout={onPointLayout} color={point?.color || getStateColor(point?.state)} testID={`${testID}.point`} />
         {renderBottomLine()}
       </View>
       <View style={styles.contentContainer} onLayout={onContentContainerLayout} ref={contentContainerRef}>

package/src/components/timeline/line.driver.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const LineDriver: (props: ComponentProps) => {
+    getLine: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        isVisible: () => boolean;
+        isEntryPointExists: () => boolean;
+        getEntryPointStyle: () => any;
+    };
+};

package/src/components/timeline/line.driver.js

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+import { ViewDriver } from "../view/View.driver.new";
+export const LineDriver = props => {
+  const lineDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}`
+  });
+  const entryPointDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.entryPoint`
+  });
+  const getLine = () => {
+    const exists = () => {
+      return lineDriver.exists();
+    };
+    const getStyle = () => {
+      return StyleSheet.flatten(lineDriver.getElement().props.style);
+    };
+    const isVisible = () => {
+      const height = getStyle().height;
+      return exists() && (height ?? 0) > 0;
+    };
+    const isEntryPointExists = () => {
+      return entryPointDriver.exists();
+    };
+    const getEntryPointStyle = () => {
+      return entryPointDriver.getStyle();
+    };
+    return {
+      exists,
+      getStyle,
+      isVisible,
+      isEntryPointExists,
+      getEntryPointStyle
+    };
+  };
+  return {
+    getLine
+  };
+};

package/src/components/timeline/point.driver.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const PointDriver: (props: ComponentProps) => {
+    getPoint: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        getContentStyle: () => any;
+    };
+};

package/src/components/timeline/point.driver.js

@@ -0,0 +1,55 @@
+import { StyleSheet } from 'react-native';
+import { TextDriver } from "../text/Text.driver.new";
+import { ImageDriver } from "../image/Image.driver.new";
+import { ViewDriver } from "../view/View.driver.new";
+export const PointDriver = props => {
+  const pointDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}`
+  });
+  const labelDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.label`
+  });
+  const iconDriver = ImageDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.icon`
+  });
+  const getLabel = () => {
+    const exists = () => {
+      return labelDriver.exists();
+    };
+    return {
+      ...labelDriver,
+      exists
+    };
+  };
+  const getIcon = () => {
+    const exists = () => {
+      return iconDriver.exists();
+    };
+    return {
+      ...iconDriver,
+      exists
+    };
+  };
+  const getPoint = () => {
+    const exists = () => {
+      return pointDriver.exists();
+    };
+    const getStyle = () => {
+      return StyleSheet.flatten(pointDriver.getElement().props.style);
+    };
+    const getContentStyle = () => {
+      return getIcon().exists() ? StyleSheet.flatten(getIcon().getElement().props.style) : getLabel().exists() && StyleSheet.flatten(getLabel().getElement().props.style);
+    };
+    return {
+      exists,
+      getStyle,
+      getContentStyle
+    };
+  };
+  return {
+    getPoint
+  };
+};

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

@@ -0,0 +1,25 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const TimelineDriver: (props: ComponentProps) => {
+    getPoint: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        getContentStyle: () => any;
+    };
+    getTopLine: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        isVisible: () => boolean;
+        isEntryPointExists: () => boolean;
+        getEntryPointStyle: () => any;
+    };
+    getBottomLine: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        isVisible: () => boolean;
+        isEntryPointExists: () => boolean;
+        getEntryPointStyle: () => any;
+    };
+    getElement: () => import("react-test-renderer").ReactTestInstance;
+    queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+    exists: () => boolean;
+};

package/src/components/timeline/timeline.driver.js

@@ -0,0 +1,39 @@
+import { useComponentDriver } from "../../testkit/new/Component.driver";
+import { LineDriver } from "./line.driver";
+import { PointDriver } from "./point.driver";
+export const TimelineDriver = props => {
+  const driver = useComponentDriver(props);
+  const pointDriver = PointDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.point`
+  });
+  const topLineDriver = LineDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.topLine`
+  });
+  const bottomLineDriver = LineDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.bottomLine`
+  });
+  const getPoint = () => {
+    return {
+      ...pointDriver.getPoint()
+    };
+  };
+  const getTopLine = () => {
+    return {
+      ...topLineDriver.getLine()
+    };
+  };
+  const getBottomLine = () => {
+    return {
+      ...bottomLineDriver.getLine()
+    };
+  };
+  return {
+    ...driver,
+    getPoint,
+    getTopLine,
+    getBottomLine
+  };
+};

package/src/components/wizard/wizard.api.json

@@ -129,7 +129,7 @@
             ],
             "items": [
               {
-                "title": "**Active**",
+                "title": "Active",
                 "description": "Border: $outlinePrimary  \nNumber: subtext, $textPrimary  \nStep label: bodySmallBold, $textNuetralHeavy  ",
                 "content": [
                   {
@@ -138,7 +138,7 @@
                 ]
               },
               {
-                "title": "**Next (enabled)**",
+                "title": "Next (enabled)",
                 "description": "Border: $outlineDisabled  \nNumber: subtext, $textNuetralHeavy  ",
                 "content": [
                   {
@@ -147,7 +147,7 @@
                 ]
               },
               {
-                "title": "**Next (disabled)**  ",
+                "title": "Next (disabled)",
                 "description": "Border: $outlineDisabled  \nNumber: subtext, $textDisabled  ",
                 "content": [
                   {
@@ -156,7 +156,7 @@
                 ]
               },
               {
-                "title": "**Completed**  ",
+                "title": "Completed",
                 "description": "Border: $outlineDisabled  \nIcon: $iconNuetral  ",
                 "content": [
                   {
@@ -165,7 +165,7 @@
                 ]
               },
               {
-                "title": "**Skipped**  ",
+                "title": "Skipped",
                 "description": "Border: $outlineDanger  \nNumber: subtext, $textDangerLight  ",
                 "content": [
                   {
@@ -174,7 +174,7 @@
                 ]
               },
               {
-                "title": "**Error**  ",
+                "title": "Error",
                 "description": "Border: $outlineDanger  \nIcon: $iconDangerLight",
                 "content": [
                   {
@@ -192,7 +192,7 @@
                 "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_section_spec.png"
               }
             ],
-            "description": "**Spacing Between Steps**  \nAll steps are distributed evenly, leaving S5 margins.  \nMin spacing between steps: S3  \n\n**Maximum Step Width**  \nCurrent step’s text box shouldnt be larger than 40% of the screen’s width.  \nIf the label will be larger it will get ellipsis.  \ne.g. : For 375px screen : 40% = 150px"
+            "description": "markdown: **Spacing Between Steps**  \nAll steps are distributed evenly, leaving S5 margins.  \nMin spacing between steps: S3  \n\n**Maximum Step Width**  \nCurrent step’s text box shouldnt be larger than 40% of the screen’s width.  \nIf the label will be larger it will get ellipsis.  \ne.g. : For 375px screen : 40% = 150px"
           },
           {
             "type": "section",

package/src/index.d.ts

@@ -76,6 +76,7 @@ export { default as RadioGroup, RadioGroupProps } from './components/radioGroup'
 export type { RecorderProps } from './typings/recorderTypes';
 export type { ComponentStatics } from './typings/common';
 export { default as ScrollBar, ScrollBarProps } from './components/scrollBar';
+export { default as SearchInput, SearchInputProps, SearchInputRef } from './components/searchInput';
 export { default as SectionsWheelPicker, SectionsWheelPickerProps } from './components/sectionsWheelPicker';
 export { default as SegmentedControl, SegmentedControlProps, SegmentedControlItemProps, SegmentedControlPreset } from './components/segmentedControl';
 export { default as SharedTransition } from './components/sharedTransition';

package/src/index.js

@@ -179,6 +179,9 @@ var _exportNames = {
   RadioGroupProps: true,
   ScrollBar: true,
   ScrollBarProps: true,
+  SearchInput: true,
+  SearchInputProps: true,
+  SearchInputRef: true,
   SectionsWheelPicker: true,
   SectionsWheelPickerProps: true,
   SegmentedControl: true,
@@ -1213,6 +1216,24 @@ Object.defineProperty(exports, "ScrollBarProps", {
     return _scrollBar().ScrollBarProps;
   }
 });
+Object.defineProperty(exports, "SearchInput", {
+  enumerable: true,
+  get: function () {
+    return _searchInput().default;
+  }
+});
+Object.defineProperty(exports, "SearchInputProps", {
+  enumerable: true,
+  get: function () {
+    return _searchInput().SearchInputProps;
+  }
+});
+Object.defineProperty(exports, "SearchInputRef", {
+  enumerable: true,
+  get: function () {
+    return _searchInput().SearchInputRef;
+  }
+});
 Object.defineProperty(exports, "SectionsWheelPicker", {
   enumerable: true,
   get: function () {
@@ -2200,6 +2221,13 @@ function _scrollBar() {
   };
   return data;
 }
+function _searchInput() {
+  const data = _interopRequireWildcard(require("./components/searchInput"));
+  _searchInput = function () {
+    return data;
+  };
+  return data;
+}
 function _sectionsWheelPicker() {
   const data = _interopRequireWildcard(require("./components/sectionsWheelPicker"));
   _sectionsWheelPicker = function () {

package/src/testkit/index.d.ts

@@ -21,3 +21,5 @@ export { PickerDriver } from '../components/picker/Picker.driver.new';
 export { ExpandableOverlayDriver } from '../incubator/expandableOverlay/ExpandableOverlay.driver';
 export { ToastDriver } from '../incubator/toast/Toast.driver.new';
 export { DateTimePickerDriver } from '../components/dateTimePicker/DateTimePicker.driver';
+export { TimelineDriver } from '../components/timeline/timeline.driver';
+export { ChipDriver } from '../components/chip/chip.driver';

package/src/testkit/index.js

@@ -20,4 +20,6 @@ export { WheelPickerItemDriver } from "../components/WheelPicker/WheelPickerItem
 export { PickerDriver } from "../components/picker/Picker.driver.new";
 export { ExpandableOverlayDriver } from "../incubator/expandableOverlay/ExpandableOverlay.driver";
 export { ToastDriver } from "../incubator/toast/Toast.driver.new";
-export { DateTimePickerDriver } from "../components/dateTimePicker/DateTimePicker.driver";
+export { DateTimePickerDriver } from "../components/dateTimePicker/DateTimePicker.driver";
+export { TimelineDriver } from "../components/timeline/timeline.driver";
+export { ChipDriver } from "../components/chip/chip.driver";