react-native-ui-lib 7.41.1-snapshot.6966 → 7.41.1

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

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

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "4.5.2",
+  "version": "4.5.1",
   "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-snapshot.6966",
+  "version": "7.41.1",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/index.js

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

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

@@ -13,27 +13,23 @@ const useNewPickerProps = props => {
     renderHeader,
     renderOverlay
   } = props;
-  const defaultModalProps = {
+  const modalProps = {
     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: {
-      ...customPickerProps,
-      modalProps: mergedModalProps
+      modalProps: {
+        onShow,
+        ...modalProps,
+        ...pickerModalProps
+      },
+      ...customPickerProps
     }
   };
   return newProps;

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

@@ -5,17 +5,8 @@
   "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",
@@ -34,11 +25,7 @@
       "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}>",
@@ -88,7 +75,7 @@
             "items": [
               {
                 "title": "",
-                "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",
+                "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",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_styling.png"
@@ -101,10 +88,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Counter Badge",

package/src/components/textField/useImperativeInputHandle.js

@@ -1,12 +1,10 @@
 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,7 +4,6 @@ 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,8 +12,7 @@ const Line = React.memo(props => {
     entry,
     top,
     style,
-    width = LINE_WIDTH,
-    testID
+    width = LINE_WIDTH
   } = props;
   const solidLineStyle = useMemo(() => {
     return [style, styles.line, {
@@ -28,14 +27,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} testID={testID} />;
+      return <Dash vertical color={color} containerStyle={dashedLineStyle} />;
     }
-    return <View style={solidLineStyle} testID={testID} />;
+    return <View style={solidLineStyle} />;
   };
   return <>
       {top && renderStartPoint()}

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

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

package/src/components/timeline/index.js

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

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": "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"
+            "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"
           },
           {
             "type": "section",

package/src/index.d.ts

@@ -76,7 +76,6 @@ 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,9 +179,6 @@ var _exportNames = {
   RadioGroupProps: true,
   ScrollBar: true,
   ScrollBarProps: true,
-  SearchInput: true,
-  SearchInputProps: true,
-  SearchInputRef: true,
   SectionsWheelPicker: true,
   SectionsWheelPickerProps: true,
   SegmentedControl: true,
@@ -1216,24 +1213,6 @@ 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 () {
@@ -2221,13 +2200,6 @@ 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,5 +21,3 @@ 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,6 +20,4 @@ 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 { TimelineDriver } from "../components/timeline/timeline.driver";
-export { ChipDriver } from "../components/chip/chip.driver";
+export { DateTimePickerDriver } from "../components/dateTimePicker/DateTimePicker.driver";

package/searchInput.d.ts

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

package/searchInput.js

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

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

@@ -1,33 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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/searchInput/index.d.ts

@@ -1,37 +0,0 @@
-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

@@ -1,218 +0,0 @@
-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

@@ -1,57 +0,0 @@
-{
-  "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

@@ -1,66 +0,0 @@
-/// <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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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
-  };
-};