From 54f7b680522723af6c20a2dcda78e6d85d4d6ec9 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 25 Feb 2025 19:09:20 +0200
Subject: [PATCH 1/9] add SearchInput component and related types

---
 demo/src/screens/MenuStructure.js             |  17 +-
 .../componentScreens/SearchInputScreen.tsx    | 118 +++++++
 demo/src/screens/componentScreens/index.js    |   4 +-
 src/components/index.js                       |   3 +
 .../searchInput/__tests__/searchInput.spec.ts |  18 ++
 src/components/searchInput/index.tsx          | 306 ++++++++++++++++++
 .../searchInput/searchInput.api.json          |  60 ++++
 src/components/searchInput/types.ts           |  72 +++++
 src/index.ts                                  |   1 +
 9 files changed, 593 insertions(+), 6 deletions(-)
 create mode 100644 demo/src/screens/componentScreens/SearchInputScreen.tsx
 create mode 100644 src/components/searchInput/__tests__/searchInput.spec.ts
 create mode 100644 src/components/searchInput/index.tsx
 create mode 100644 src/components/searchInput/searchInput.api.json
 create mode 100644 src/components/searchInput/types.ts

diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
index c755c44436..c63e9edf65 100644
--- a/demo/src/screens/MenuStructure.js
+++ b/demo/src/screens/MenuStructure.js
@@ -38,6 +38,7 @@ export const navigationData = {
       {title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
       {title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},
       {title: 'ScrollBar', tags: 'scroll bar gradient', screen: 'unicorn.components.ScrollBarScreen'},
+      {title: 'SearchInputScreen', tags: 'search input', screen: 'unicorn.components.SearchInputScreen'},
       {
         title: 'Shared Transition',
         tags: 'shared transition element',
@@ -99,16 +100,18 @@ export const navigationData = {
       {title: 'Conversation List', tags: 'list conversation', screen: 'unicorn.lists.ConversationListScreen'},
       {title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'},
       {title: 'SortableList', tags: 'sortable list drag', screen: 'unicorn.components.SortableListScreen'},
-      {title: 'HorizontalSortableList', tags: 'sortable horizontal list drag', screen: 'unicorn.components.HorizontalSortableListScreen'},
+      {
+        title: 'HorizontalSortableList',
+        tags: 'sortable horizontal list drag',
+        screen: 'unicorn.components.HorizontalSortableListScreen'
+      },
       {title: 'GridList', tags: 'grid list', screen: 'unicorn.components.GridListScreen'},
       {title: 'SortableGridList', tags: 'sort grid list drag', screen: 'unicorn.components.SortableGridListScreen'}
     ]
   },
   Charts: {
     title: 'Charts',
-    screens: [
-      {title: 'PieChart', tags: 'pie chart data', screen: 'unicorn.components.PieChartScreen'}
-    ]
+    screens: [{title: 'PieChart', tags: 'pie chart data', screen: 'unicorn.components.PieChartScreen'}]
   },
   LayoutsAndTemplates: {
     title: 'Layouts & Templates',
@@ -120,7 +123,11 @@ export const navigationData = {
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
       {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
-      {title: 'TabControllerWithStickyHeader', tags: 'tabbar controller native sticky header', screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'},
+      {
+        title: 'TabControllerWithStickyHeader',
+        tags: 'tabbar controller native sticky header',
+        screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'
+      },
       {title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
       {
         title: 'withScrollEnabler',
diff --git a/demo/src/screens/componentScreens/SearchInputScreen.tsx b/demo/src/screens/componentScreens/SearchInputScreen.tsx
new file mode 100644
index 0000000000..75101051d2
--- /dev/null
+++ b/demo/src/screens/componentScreens/SearchInputScreen.tsx
@@ -0,0 +1,118 @@
+import React, {useCallback, useRef, useState} from 'react';
+import {Alert, ScrollView} from 'react-native';
+import {Colors, View, Text, Switch, SearchInput, SearchInputRef, SearchInputPresets, Button} from 'react-native-ui-lib';
+
+const SearchInputScreen = () => {
+  const [showCancelBtn, setShowCancelBtn] = useState(false);
+  const [showLoader, setShowLoader] = useState(false);
+  const searchInput = useRef<SearchInputRef>();
+
+  const onChangeText = (text: string) => {
+    console.log('UILIB text: ', text);
+  };
+
+  const onDismiss = useCallback(() => {
+    Alert.alert('Cancel was pressed');
+  }, []);
+
+  return (
+    <ScrollView style={{marginVertical: 10}}>
+      <Text center h3 $textDefault margin-5>
+        SearchInput
+      </Text>
+
+      <View>
+        <SearchInput
+          showLoader={showLoader}
+          ref={searchInput}
+          testID={'searchInput'}
+          value=""
+          placeholder="Search"
+          onDismiss={showCancelBtn ? onDismiss : undefined}
+          cancelButtonProps={{label: 'Cancel'}}
+        />
+        <View marginV-s2>
+          <SearchInput
+            showLoader={showLoader}
+            invertColors
+            value={''}
+            placeholder="Search with inverted colors"
+            style={{backgroundColor: Colors.$backgroundNeutralHeavy}}
+            onDismiss={showCancelBtn ? onDismiss : undefined}
+            cancelButtonProps={{label: 'Cancel'}}
+            onChangeText={onChangeText}
+          />
+        </View>
+        <SearchInput
+          showLoader={showLoader}
+          value={''}
+          placeholder="Search with custom colors"
+          onDismiss={showCancelBtn ? onDismiss : undefined}
+          cancelButtonProps={{label: 'Cancel'}}
+          onChangeText={onChangeText}
+          style={{backgroundColor: Colors.purple20}}
+          schemeColor={Colors.white}
+          placeholderTextColor={Colors.white}
+          containerStyle={{color: Colors.white}}
+        />
+      </View>
+
+      <View marginV-s2>
+        <Text center h3 $textDefault margin-5>
+          Search Input Presets:
+        </Text>
+        <View margin-s2>
+          <Text marginL-s3 marginV-s2>
+            Default:
+          </Text>
+          <SearchInput
+            showLoader={showLoader}
+            testID={'searchInput'}
+            value=""
+            placeholder="Search"
+            onDismiss={showCancelBtn ? onDismiss : undefined}
+            cancelButtonProps={{label: 'Cancel'}}
+          />
+        </View>
+        <Text marginL-s3 marginV-s2>
+          Prominent:
+        </Text>
+        <SearchInput
+          showLoader={showLoader}
+          testID={'searchInput'}
+          value=""
+          placeholder="Search"
+          onDismiss={showCancelBtn ? onDismiss : undefined}
+          cancelButtonProps={{label: 'Cancel'}}
+          preset={SearchInputPresets.PROMINENT}
+        />
+      </View>
+
+      <View marginT-s8 marginH-s3>
+        <Text bodyBold>Settings:</Text>
+        <View row marginV-s2>
+          <Switch
+            value={showCancelBtn}
+            onValueChange={value => setShowCancelBtn(value)}
+            onColor={Colors.$iconSuccessLight}
+          />
+          <Text marginL-s4>Toggle cancel button</Text>
+        </View>
+        <View row marginV-s2>
+          <Switch value={showLoader} onValueChange={value => setShowLoader(value)} onColor={Colors.$iconSuccessLight}/>
+          <Text marginL-s4>Toggle loader</Text>
+        </View>
+        <View padding-10 marginV-s1>
+          <Text>Actions: on the first example</Text>
+          <View row spread marginV-s1>
+            <Button size={Button.sizes.small} label={'Blur'} onPress={() => searchInput?.current?.blur()}/>
+            <Button size={Button.sizes.small} label={'Focus'} onPress={() => searchInput?.current?.focus()}/>
+            <Button size={Button.sizes.small} label={'Clear'} onPress={() => searchInput?.current?.clear()}/>
+          </View>
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+export default SearchInputScreen;
diff --git a/demo/src/screens/componentScreens/index.js b/demo/src/screens/componentScreens/index.js
index 3007fb4bfd..665cb6b25c 100644
--- a/demo/src/screens/componentScreens/index.js
+++ b/demo/src/screens/componentScreens/index.js
@@ -42,6 +42,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
   registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
   registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
+  registrar('unicorn.components.SearchInputScreen', () => require('./SearchInputScreen').default);
   registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
   registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
   registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
@@ -53,7 +54,8 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
   registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
-  registrar('unicorn.components.TabControllerWithStickyHeaderScreen', () => require('./TabControllerWithStickyHeaderScreen').default);
+  registrar('unicorn.components.TabControllerWithStickyHeaderScreen',
+    () => require('./TabControllerWithStickyHeaderScreen').default);
   registrar('unicorn.components.TextFieldScreen', () => require('./TextFieldScreen').default);
   registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
   registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);
diff --git a/src/components/index.js b/src/components/index.js
index 78422ac93e..ac4ffccb9d 100644
--- a/src/components/index.js
+++ b/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;
   },
diff --git a/src/components/searchInput/__tests__/searchInput.spec.ts b/src/components/searchInput/__tests__/searchInput.spec.ts
new file mode 100644
index 0000000000..f4cbc1169d
--- /dev/null
+++ b/src/components/searchInput/__tests__/searchInput.spec.ts
@@ -0,0 +1,18 @@
+// import SearchInput from '../';
+
+// describe('SearchInput unit tests', () => {
+//   beforeEach(() => {
+//     jest.resetModules();
+//     jest.resetAllMocks();
+//   });
+
+//   describe('getValidState', () => {
+//     it('passing value', () => {
+//       const props = {value: 'text'};
+//       const uut = SearchInput(props);
+//       expect(uut.state.propsValue).toEqual('text');
+//       expect(uut.state.value).toEqual('text');
+//       expect(uut.state.hasValue).toEqual(true);
+//     });
+//   });
+// });
diff --git a/src/components/searchInput/index.tsx b/src/components/searchInput/index.tsx
new file mode 100644
index 0000000000..e12204e044
--- /dev/null
+++ b/src/components/searchInput/index.tsx
@@ -0,0 +1,306 @@
+import _ from 'lodash';
+import React, {useImperativeHandle, forwardRef, ForwardedRef, 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: SearchInputProps, ref: ForwardedRef<any>) => {
+  const {
+    preset = SearchInputPresets.DEFAULT,
+    onDismiss,
+    useSafeArea,
+    invertColors,
+    testID,
+    showLoader,
+    value: controlledValue,
+    onChangeText,
+    onClear,
+    containerStyle,
+    showFilterIcon,
+    // loaderProps,
+    style,
+    inaccessible
+  } = props;
+  const currentAnimatedValue = useRef<ReturnType<typeof Animated.timing> | undefined>();
+  const searchInputRef = useRef<TextInput>();
+  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: number) => {
+    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: string) => {
+    console.log(`onChangeTextHandler, text:`, text);
+    onChangeText?.(text);
+    setValue(text);
+    setHasValue(!_.isEmpty(text));
+  };
+
+  const clearInput = () => {
+    searchInputRef?.current?.clear();
+    onChangeTextHandler('');
+    onClear?.();
+  };
+
+  // const blur = () => {
+  //   if (searchInputRef.current) {
+  //     searchInputRef.current.blur();
+  //   }
+  // };
+
+  // const focus = () => {
+  //   if (searchInputRef.current) {
+  //     searchInputRef.current.focus();
+  //   }
+  // };
+
+  // const clear = () => {
+  //   if (searchInputRef.current) {
+  //     searchInputRef.current.clear();
+  //     onChangeText?.('');
+  //     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};
+    return (
+      <Animated.View style={[{transform}, clearButtonStyle]}>
+        <Button
+          link
+          grey10
+          text80
+          iconSource={Assets.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}
+          //@ts-ignore
+          ref={searchInputRef?.current}
+          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() && showFilterIcon && renderIcon(Assets.icons.general.filter, true)}
+      </View>
+    );
+  };
+
+  const isDismissible = () => {
+    return typeof onDismiss !== 'undefined';
+  };
+
+  const renderIcon = (icon: any, 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 {renderLoaderElement} = props;
+    return (
+      <View>
+        {renderLoaderElement ? renderLoaderElement() : <ActivityIndicator size={'small'} color={Colors.grey40}/>}
+      </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.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
+  }
+});
+
+interface StaticMembers {
+  presets: typeof SearchInputPresets;
+}
+
+SearchInput.displayName = 'SearchInput';
+export {SearchInput, SearchInputProps, SearchInputRef, SearchInputPresets};
+export default asBaseComponent<SearchInputProps, StaticMembers>(SearchInput);
diff --git a/src/components/searchInput/searchInput.api.json b/src/components/searchInput/searchInput.api.json
new file mode 100644
index 0000000000..d7d36f01ab
--- /dev/null
+++ b/src/components/searchInput/searchInput.api.json
@@ -0,0 +1,60 @@
+{
+  "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": "title", "type": "string", "description": "Title prop."},
+    {"name": "showFilterIcon", "type": "boolean", "description": "Pass true to add filter icon on the right."},
+    {
+      "name": "showLoader",
+      "type": "boolean",
+      "description": "Whether to show a loader instead of the left search icon."
+    },
+    {
+      "name": "renderLoaderElement",
+      "type": " () => React.ReactElement",
+      "description": "custom loader element to render instead of the default loader"
+    },
+    {
+      "name": "renderLoaderElement",
+      "type": " () => React.ReactElement",
+      "description": "custom loader element to render instead of the default loader"
+    },
+    {
+      "name": "cancelButtonProps",
+      "type": "ButtonProps",
+      "description": "Props for the cancel button"
+    },
+    {
+      "name": "schemeColor",
+      "type": "string | null",
+      "description": "The SearchInput colors (affects the search icon color, the filter icon color when 'showFilterIcon' is passed 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}",
+    "  showFilterIcon={showFilterIcon$5}",
+    "/>"
+  ]
+}
diff --git a/src/components/searchInput/types.ts b/src/components/searchInput/types.ts
new file mode 100644
index 0000000000..bb1bed168a
--- /dev/null
+++ b/src/components/searchInput/types.ts
@@ -0,0 +1,72 @@
+import {TextInputProps, StyleProp, ViewStyle, TextStyle} from 'react-native';
+import {ButtonProps} from '../button';
+
+export 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;
+  /**
+   * The SearchInput colors (affects the search icon color, the filter icon color when 'showFilterIcon' is passed and the cancel button color)
+   */
+  schemeColor?: string | null;
+  /**
+   * Title prop
+   */
+  title?: string;
+  /**
+   * Pass true to add filter icon on the right
+   */
+  showFilterIcon?: boolean;
+  /**
+   * Whether to show a loader instead of the left search icon
+   */
+  showLoader?: boolean;
+  /**
+   * custom loader element
+   */
+  renderLoaderElement?: () => 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}`;
+  /**
+   * Props for the cancel button
+   */
+  cancelButtonProps?: ButtonProps;
+};
diff --git a/src/index.ts b/src/index.ts
index 5cbd7088d7..aaa7b083a1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -131,6 +131,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, SearchInputPresets} from './components/searchInput';
 export {default as SectionsWheelPicker, SectionsWheelPickerProps} from './components/sectionsWheelPicker';
 export {
   default as SegmentedControl,

From f1edd8327eb6d7a07ef75946a87da578a41b2519 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Wed, 26 Feb 2025 08:04:39 +0200
Subject: [PATCH 2/9] delete SearchInput unit tests since they are failing

---
 .../searchInput/__tests__/searchInput.spec.ts  | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 src/components/searchInput/__tests__/searchInput.spec.ts

diff --git a/src/components/searchInput/__tests__/searchInput.spec.ts b/src/components/searchInput/__tests__/searchInput.spec.ts
deleted file mode 100644
index f4cbc1169d..0000000000
--- a/src/components/searchInput/__tests__/searchInput.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// import SearchInput from '../';
-
-// describe('SearchInput unit tests', () => {
-//   beforeEach(() => {
-//     jest.resetModules();
-//     jest.resetAllMocks();
-//   });
-
-//   describe('getValidState', () => {
-//     it('passing value', () => {
-//       const props = {value: 'text'};
-//       const uut = SearchInput(props);
-//       expect(uut.state.propsValue).toEqual('text');
-//       expect(uut.state.value).toEqual('text');
-//       expect(uut.state.hasValue).toEqual(true);
-//     });
-//   });
-// });

From 5d643a93339110b6ae0428ee2f43f7d995a899c1 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Wed, 26 Feb 2025 12:26:52 +0200
Subject: [PATCH 3/9] add custom right element rendering and loader props

---
 .../componentScreens/SearchInputScreen.tsx    | 42 ++++++++++++++++---
 src/components/searchInput/index.tsx          | 38 +++++------------
 src/components/searchInput/types.ts           | 22 +++++-----
 3 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/demo/src/screens/componentScreens/SearchInputScreen.tsx b/demo/src/screens/componentScreens/SearchInputScreen.tsx
index 75101051d2..b3d5692603 100644
--- a/demo/src/screens/componentScreens/SearchInputScreen.tsx
+++ b/demo/src/screens/componentScreens/SearchInputScreen.tsx
@@ -1,10 +1,22 @@
 import React, {useCallback, useRef, useState} from 'react';
-import {Alert, ScrollView} from 'react-native';
-import {Colors, View, Text, Switch, SearchInput, SearchInputRef, SearchInputPresets, Button} from 'react-native-ui-lib';
+import {Alert} from 'react-native';
+import {
+  Colors,
+  View,
+  Text,
+  Switch,
+  SearchInput,
+  SearchInputRef,
+  SearchInputPresets,
+  Button,
+  Icon,
+  Assets
+} from 'react-native-ui-lib';
 
 const SearchInputScreen = () => {
   const [showCancelBtn, setShowCancelBtn] = useState(false);
   const [showLoader, setShowLoader] = useState(false);
+  const [showCustomRightElement, setShowCustomRightElement] = useState(false);
   const searchInput = useRef<SearchInputRef>();
 
   const onChangeText = (text: string) => {
@@ -15,8 +27,16 @@ const SearchInputScreen = () => {
     Alert.alert('Cancel was pressed');
   }, []);
 
+  const customRightElement = () => {
+    return (
+      <View center marginH-s2>
+        <Icon source={Assets.icons.check} size={3}/>
+      </View>
+    );
+  };
+
   return (
-    <ScrollView style={{marginVertical: 10}}>
+    <View style={{marginVertical: 5}}>
       <Text center h3 $textDefault margin-5>
         SearchInput
       </Text>
@@ -30,6 +50,7 @@ const SearchInputScreen = () => {
           placeholder="Search"
           onDismiss={showCancelBtn ? onDismiss : undefined}
           cancelButtonProps={{label: 'Cancel'}}
+          renderCustomRightElement={showCustomRightElement ? customRightElement : undefined}
         />
         <View marginV-s2>
           <SearchInput
@@ -41,6 +62,7 @@ const SearchInputScreen = () => {
             onDismiss={showCancelBtn ? onDismiss : undefined}
             cancelButtonProps={{label: 'Cancel'}}
             onChangeText={onChangeText}
+            renderCustomRightElement={showCustomRightElement ? customRightElement : undefined}
           />
         </View>
         <SearchInput
@@ -51,9 +73,9 @@ const SearchInputScreen = () => {
           cancelButtonProps={{label: 'Cancel'}}
           onChangeText={onChangeText}
           style={{backgroundColor: Colors.purple20}}
-          schemeColor={Colors.white}
           placeholderTextColor={Colors.white}
           containerStyle={{color: Colors.white}}
+          renderCustomRightElement={showCustomRightElement ? customRightElement : undefined}
         />
       </View>
 
@@ -72,6 +94,7 @@ const SearchInputScreen = () => {
             placeholder="Search"
             onDismiss={showCancelBtn ? onDismiss : undefined}
             cancelButtonProps={{label: 'Cancel'}}
+            renderCustomRightElement={showCustomRightElement ? customRightElement : undefined}
           />
         </View>
         <Text marginL-s3 marginV-s2>
@@ -85,6 +108,7 @@ const SearchInputScreen = () => {
           onDismiss={showCancelBtn ? onDismiss : undefined}
           cancelButtonProps={{label: 'Cancel'}}
           preset={SearchInputPresets.PROMINENT}
+          renderCustomRightElement={showCustomRightElement ? customRightElement : undefined}
         />
       </View>
 
@@ -98,6 +122,14 @@ const SearchInputScreen = () => {
           />
           <Text marginL-s4>Toggle cancel button</Text>
         </View>
+        <View row marginV-s2>
+          <Switch
+            value={showCustomRightElement}
+            onValueChange={value => setShowCustomRightElement(value)}
+            onColor={Colors.$iconSuccessLight}
+          />
+          <Text marginL-s4>Toggle Custom right element</Text>
+        </View>
         <View row marginV-s2>
           <Switch value={showLoader} onValueChange={value => setShowLoader(value)} onColor={Colors.$iconSuccessLight}/>
           <Text marginL-s4>Toggle loader</Text>
@@ -111,7 +143,7 @@ const SearchInputScreen = () => {
           </View>
         </View>
       </View>
-    </ScrollView>
+    </View>
   );
 };
 
diff --git a/src/components/searchInput/index.tsx b/src/components/searchInput/index.tsx
index e12204e044..2d7b2e93cc 100644
--- a/src/components/searchInput/index.tsx
+++ b/src/components/searchInput/index.tsx
@@ -25,17 +25,17 @@ const SearchInput = forwardRef((props: SearchInputProps, ref: ForwardedRef<any>)
     invertColors,
     testID,
     showLoader,
+    loaderProps,
     value: controlledValue,
     onChangeText,
     onClear,
     containerStyle,
-    showFilterIcon,
-    // loaderProps,
+    renderCustomRightElement,
     style,
     inaccessible
   } = props;
   const currentAnimatedValue = useRef<ReturnType<typeof Animated.timing> | undefined>();
-  const searchInputRef = useRef<TextInput>();
+  const searchInputRef = useRef<TextInput>(null);
   const [hasValue, setHasValue] = useState(Boolean(controlledValue));
   const [value, setValue] = useState(controlledValue);
   const [valueState] = useState(new Animated.Value(_.isEmpty(controlledValue) ? 0 : 1));
@@ -113,26 +113,6 @@ const SearchInput = forwardRef((props: SearchInputProps, ref: ForwardedRef<any>)
     onClear?.();
   };
 
-  // const blur = () => {
-  //   if (searchInputRef.current) {
-  //     searchInputRef.current.blur();
-  //   }
-  // };
-
-  // const focus = () => {
-  //   if (searchInputRef.current) {
-  //     searchInputRef.current.focus();
-  //   }
-  // };
-
-  // const clear = () => {
-  //   if (searchInputRef.current) {
-  //     searchInputRef.current.clear();
-  //     onChangeText?.('');
-  //     onClear?.();
-  //   }
-  // };
-
   const renderClearButton = () => {
     const transform = [
       {
@@ -144,7 +124,7 @@ const SearchInput = forwardRef((props: SearchInputProps, ref: ForwardedRef<any>)
     ];
 
     const clearButtonStyle = !isDismissible() && isAnimatingClearButton && styles.clearButton;
-    const iconStyle = {tintColor: invertColors ? INVERTED_ICON_COLOR : Colors.grey40};
+    const iconStyle = {tintColor: invertColors ? INVERTED_ICON_COLOR : Colors.grey40, width: 12, height: 12};
     return (
       <Animated.View style={[{transform}, clearButtonStyle]}>
         <Button
@@ -194,8 +174,7 @@ const SearchInput = forwardRef((props: SearchInputProps, ref: ForwardedRef<any>)
           placeholderTextColor={placeholderTextColor}
           underlineColorAndroid="transparent"
           selectionColor={selectionColor}
-          //@ts-ignore
-          ref={searchInputRef?.current}
+          ref={searchInputRef}
           value={value}
           allowFontScaling={false}
           style={[
@@ -209,7 +188,7 @@ const SearchInput = forwardRef((props: SearchInputProps, ref: ForwardedRef<any>)
         />
         {isAnimatingClearButton && renderClearButton()}
         {isDismissible() && renderCancelButton()}
-        {!isDismissible() && showFilterIcon && renderIcon(Assets.icons.general.filter, true)}
+        {!isDismissible() && renderCustomRightElement && renderCustomRightElement()}
       </View>
     );
   };
@@ -236,7 +215,7 @@ const SearchInput = forwardRef((props: SearchInputProps, ref: ForwardedRef<any>)
     const {renderLoaderElement} = props;
     return (
       <View>
-        {renderLoaderElement ? renderLoaderElement() : <ActivityIndicator size={'small'} color={Colors.grey40}/>}
+        {renderLoaderElement ? renderLoaderElement() : <ActivityIndicator style={styles.loader} {...loaderProps}/>}
       </View>
     );
   };
@@ -294,6 +273,9 @@ const styles = StyleSheet.create({
   },
   leftIcon: {
     marginLeft: Spacings.s4
+  },
+  loader: {
+    marginHorizontal: Spacings.s4
   }
 });
 
diff --git a/src/components/searchInput/types.ts b/src/components/searchInput/types.ts
index bb1bed168a..d2b8ffb059 100644
--- a/src/components/searchInput/types.ts
+++ b/src/components/searchInput/types.ts
@@ -1,4 +1,4 @@
-import {TextInputProps, StyleProp, ViewStyle, TextStyle} from 'react-native';
+import {TextInputProps, StyleProp, ViewStyle, TextStyle, ActivityIndicatorProps} from 'react-native';
 import {ButtonProps} from '../button';
 
 export enum SearchInputPresets {
@@ -22,21 +22,25 @@ export type SearchInputProps = TextInputProps & {
    */
   onDismiss?: () => void;
   /**
-   * The SearchInput colors (affects the search icon color, the filter icon color when 'showFilterIcon' is passed and the cancel button color)
+   * Props for the cancel button
    */
-  schemeColor?: string | null;
+  cancelButtonProps?: ButtonProps;
   /**
-   * Title prop
+   * Custom right element
    */
-  title?: string;
+  renderCustomRightElement?: () => React.ReactElement;
   /**
-   * Pass true to add filter icon on the right
+   * Title prop
    */
-  showFilterIcon?: boolean;
+  title?: string;
   /**
    * Whether to show a loader instead of the left search icon
    */
   showLoader?: boolean;
+  /**
+   * Loader props
+   */
+  loaderProps?: ActivityIndicatorProps;
   /**
    * custom loader element
    */
@@ -65,8 +69,4 @@ export type SearchInputProps = TextInputProps & {
    * The preset for the search input: default or prominent
    */
   preset?: SearchInputPresets | `${SearchInputPresets}`;
-  /**
-   * Props for the cancel button
-   */
-  cancelButtonProps?: ButtonProps;
 };

From bd94138f7ef3e1449324bbd386c1ca20168f166c Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Wed, 26 Feb 2025 14:06:09 +0200
Subject: [PATCH 4/9] update renderCustomRightElement and renderLoaderElement
 to accept props

---
 src/components/searchInput/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/searchInput/types.ts b/src/components/searchInput/types.ts
index d2b8ffb059..3648c0358c 100644
--- a/src/components/searchInput/types.ts
+++ b/src/components/searchInput/types.ts
@@ -28,7 +28,7 @@ export type SearchInputProps = TextInputProps & {
   /**
    * Custom right element
    */
-  renderCustomRightElement?: () => React.ReactElement;
+  renderCustomRightElement?: (props?: any) => React.ReactElement;
   /**
    * Title prop
    */
@@ -44,7 +44,7 @@ export type SearchInputProps = TextInputProps & {
   /**
    * custom loader element
    */
-  renderLoaderElement?: () => React.ReactElement;
+  renderLoaderElement?: (props?: any) => React.ReactElement;
   /**
    * converts the colors of the search's input elements, icons and button to white
    */

From 4a245c267669c2bafdcf4e55c13856d1619caeb4 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Fri, 21 Mar 2025 12:30:36 +0200
Subject: [PATCH 5/9] Update icon sources in SearchInputScreen and SearchInput
 components

---
 demo/src/screens/componentScreens/SearchInputScreen.tsx | 2 +-
 src/components/searchInput/index.tsx                    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/demo/src/screens/componentScreens/SearchInputScreen.tsx b/demo/src/screens/componentScreens/SearchInputScreen.tsx
index b3d5692603..593ddd9776 100644
--- a/demo/src/screens/componentScreens/SearchInputScreen.tsx
+++ b/demo/src/screens/componentScreens/SearchInputScreen.tsx
@@ -30,7 +30,7 @@ const SearchInputScreen = () => {
   const customRightElement = () => {
     return (
       <View center marginH-s2>
-        <Icon source={Assets.icons.check} size={3}/>
+        <Icon source={Assets.icons.demo.check}/>
       </View>
     );
   };
diff --git a/src/components/searchInput/index.tsx b/src/components/searchInput/index.tsx
index 2d7b2e93cc..ed7007df6d 100644
--- a/src/components/searchInput/index.tsx
+++ b/src/components/searchInput/index.tsx
@@ -131,7 +131,7 @@ const SearchInput = forwardRef((props: SearchInputProps, ref: ForwardedRef<any>)
           link
           grey10
           text80
-          iconSource={Assets.icons.x}
+          iconSource={Assets.internal.icons.x}
           iconStyle={iconStyle}
           onPress={clearInput}
           hitSlop={HIT_SLOP_VALUE}
@@ -231,7 +231,7 @@ const SearchInput = forwardRef((props: SearchInputProps, ref: ForwardedRef<any>)
       style={[style, isProminent && styles.prominentContainer, topInputTopMargin]}
       testID={`${testID}.searchBox`}
     >
-      {showLoader ? renderLoader() : renderIcon(Assets.icons.search)}
+      {showLoader ? renderLoader() : renderIcon(Assets.internal.icons.search)}
       {renderTextInput()}
     </View>
   );

From b167201eb3dbed55754b5a40e3197ccc569fc613 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 1 Apr 2025 18:41:28 +0300
Subject: [PATCH 6/9] Refactor renderCustomRightElement prop to
 customRightElement

---
 .../componentScreens/SearchInputScreen.tsx    | 22 +++++++++----------
 src/components/searchInput/index.tsx          |  4 ++--
 src/components/searchInput/types.ts           |  2 +-
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/demo/src/screens/componentScreens/SearchInputScreen.tsx b/demo/src/screens/componentScreens/SearchInputScreen.tsx
index 593ddd9776..8ba5f60225 100644
--- a/demo/src/screens/componentScreens/SearchInputScreen.tsx
+++ b/demo/src/screens/componentScreens/SearchInputScreen.tsx
@@ -27,13 +27,11 @@ const SearchInputScreen = () => {
     Alert.alert('Cancel was pressed');
   }, []);
 
-  const customRightElement = () => {
-    return (
-      <View center marginH-s2>
-        <Icon source={Assets.icons.demo.check}/>
-      </View>
-    );
-  };
+  const customRightElement = (
+    <View center marginH-s2>
+      <Icon source={Assets.icons.demo.check}/>
+    </View>
+  );
 
   return (
     <View style={{marginVertical: 5}}>
@@ -50,7 +48,7 @@ const SearchInputScreen = () => {
           placeholder="Search"
           onDismiss={showCancelBtn ? onDismiss : undefined}
           cancelButtonProps={{label: 'Cancel'}}
-          renderCustomRightElement={showCustomRightElement ? customRightElement : undefined}
+          customRightElement={showCustomRightElement ? customRightElement : undefined}
         />
         <View marginV-s2>
           <SearchInput
@@ -62,7 +60,7 @@ const SearchInputScreen = () => {
             onDismiss={showCancelBtn ? onDismiss : undefined}
             cancelButtonProps={{label: 'Cancel'}}
             onChangeText={onChangeText}
-            renderCustomRightElement={showCustomRightElement ? customRightElement : undefined}
+            customRightElement={showCustomRightElement ? customRightElement : undefined}
           />
         </View>
         <SearchInput
@@ -75,7 +73,7 @@ const SearchInputScreen = () => {
           style={{backgroundColor: Colors.purple20}}
           placeholderTextColor={Colors.white}
           containerStyle={{color: Colors.white}}
-          renderCustomRightElement={showCustomRightElement ? customRightElement : undefined}
+          customRightElement={showCustomRightElement ? customRightElement : undefined}
         />
       </View>
 
@@ -94,7 +92,7 @@ const SearchInputScreen = () => {
             placeholder="Search"
             onDismiss={showCancelBtn ? onDismiss : undefined}
             cancelButtonProps={{label: 'Cancel'}}
-            renderCustomRightElement={showCustomRightElement ? customRightElement : undefined}
+            customRightElement={showCustomRightElement ? customRightElement : undefined}
           />
         </View>
         <Text marginL-s3 marginV-s2>
@@ -108,7 +106,7 @@ const SearchInputScreen = () => {
           onDismiss={showCancelBtn ? onDismiss : undefined}
           cancelButtonProps={{label: 'Cancel'}}
           preset={SearchInputPresets.PROMINENT}
-          renderCustomRightElement={showCustomRightElement ? customRightElement : undefined}
+          customRightElement={showCustomRightElement ? customRightElement : undefined}
         />
       </View>
 
diff --git a/src/components/searchInput/index.tsx b/src/components/searchInput/index.tsx
index ed7007df6d..274cd0d199 100644
--- a/src/components/searchInput/index.tsx
+++ b/src/components/searchInput/index.tsx
@@ -30,7 +30,7 @@ const SearchInput = forwardRef((props: SearchInputProps, ref: ForwardedRef<any>)
     onChangeText,
     onClear,
     containerStyle,
-    renderCustomRightElement,
+    customRightElement,
     style,
     inaccessible
   } = props;
@@ -188,7 +188,7 @@ const SearchInput = forwardRef((props: SearchInputProps, ref: ForwardedRef<any>)
         />
         {isAnimatingClearButton && renderClearButton()}
         {isDismissible() && renderCancelButton()}
-        {!isDismissible() && renderCustomRightElement && renderCustomRightElement()}
+        {!isDismissible() && customRightElement}
       </View>
     );
   };
diff --git a/src/components/searchInput/types.ts b/src/components/searchInput/types.ts
index 3648c0358c..201c65721e 100644
--- a/src/components/searchInput/types.ts
+++ b/src/components/searchInput/types.ts
@@ -28,7 +28,7 @@ export type SearchInputProps = TextInputProps & {
   /**
    * Custom right element
    */
-  renderCustomRightElement?: (props?: any) => React.ReactElement;
+  customRightElement?: React.ReactElement;
   /**
    * Title prop
    */

From fb8762f120fba2925861064ed2b9a2dea39a48c5 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 1 Apr 2025 18:43:07 +0300
Subject: [PATCH 7/9] Remove unused title prop

---
 src/components/searchInput/types.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/searchInput/types.ts b/src/components/searchInput/types.ts
index 201c65721e..72bb926d04 100644
--- a/src/components/searchInput/types.ts
+++ b/src/components/searchInput/types.ts
@@ -29,10 +29,6 @@ export type SearchInputProps = TextInputProps & {
    * Custom right element
    */
   customRightElement?: React.ReactElement;
-  /**
-   * Title prop
-   */
-  title?: string;
   /**
    * Whether to show a loader instead of the left search icon
    */

From 23443458c0f74d3d0ef7554d9e4b4e744051b4bc Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 1 Apr 2025 18:46:47 +0300
Subject: [PATCH 8/9] Refactor SearchInput API

---
 src/components/searchInput/searchInput.api.json | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/searchInput/searchInput.api.json b/src/components/searchInput/searchInput.api.json
index d7d36f01ab..8f67bba8b9 100644
--- a/src/components/searchInput/searchInput.api.json
+++ b/src/components/searchInput/searchInput.api.json
@@ -8,8 +8,6 @@
   "props": [
     {"name": "onDismiss", "type": "() => void", "description": "callback for dismiss action"},
     {"name": "onClear", "type": "() => void", "description": "On clear button callback."},
-    {"name": "title", "type": "string", "description": "Title prop."},
-    {"name": "showFilterIcon", "type": "boolean", "description": "Pass true to add filter icon on the right."},
     {
       "name": "showLoader",
       "type": "boolean",
@@ -21,9 +19,9 @@
       "description": "custom loader element to render instead of the default loader"
     },
     {
-      "name": "renderLoaderElement",
-      "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",

From 82626697db5fce92d1f94f23f881a9b8f19e88cf Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Wed, 16 Apr 2025 12:14:43 +0300
Subject: [PATCH 9/9] fixed review notes

---
 .../componentScreens/SearchInputScreen.tsx        | 15 ++-------------
 src/components/searchInput/searchInput.api.json   |  3 +--
 src/components/searchInput/types.ts               |  2 +-
 src/index.ts                                      |  2 +-
 4 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/demo/src/screens/componentScreens/SearchInputScreen.tsx b/demo/src/screens/componentScreens/SearchInputScreen.tsx
index 8ba5f60225..f3473b87f3 100644
--- a/demo/src/screens/componentScreens/SearchInputScreen.tsx
+++ b/demo/src/screens/componentScreens/SearchInputScreen.tsx
@@ -1,17 +1,6 @@
 import React, {useCallback, useRef, useState} from 'react';
 import {Alert} from 'react-native';
-import {
-  Colors,
-  View,
-  Text,
-  Switch,
-  SearchInput,
-  SearchInputRef,
-  SearchInputPresets,
-  Button,
-  Icon,
-  Assets
-} from 'react-native-ui-lib';
+import {Colors, View, Text, Switch, SearchInput, SearchInputRef, Button, Icon, Assets} from 'react-native-ui-lib';
 
 const SearchInputScreen = () => {
   const [showCancelBtn, setShowCancelBtn] = useState(false);
@@ -105,7 +94,7 @@ const SearchInputScreen = () => {
           placeholder="Search"
           onDismiss={showCancelBtn ? onDismiss : undefined}
           cancelButtonProps={{label: 'Cancel'}}
-          preset={SearchInputPresets.PROMINENT}
+          preset={SearchInput.presets.PROMINENT}
           customRightElement={showCustomRightElement ? customRightElement : undefined}
         />
       </View>
diff --git a/src/components/searchInput/searchInput.api.json b/src/components/searchInput/searchInput.api.json
index 8f67bba8b9..ddf1ac5663 100644
--- a/src/components/searchInput/searchInput.api.json
+++ b/src/components/searchInput/searchInput.api.json
@@ -31,7 +31,7 @@
     {
       "name": "schemeColor",
       "type": "string | null",
-      "description": "The SearchInput colors (affects the search icon color, the filter icon color when 'showFilterIcon' is passed and the cancel button color)"
+      "description": "The SearchInput colors (affects the search icon color and the cancel button color)"
     },
     {
       "name": "inaccessible",
@@ -52,7 +52,6 @@
     "  testID={'searchInput'$2}",
     "  placeholder={'Search'$3}",
     "  onDismiss={onDismiss$4}",
-    "  showFilterIcon={showFilterIcon$5}",
     "/>"
   ]
 }
diff --git a/src/components/searchInput/types.ts b/src/components/searchInput/types.ts
index 72bb926d04..59a1751ca9 100644
--- a/src/components/searchInput/types.ts
+++ b/src/components/searchInput/types.ts
@@ -40,7 +40,7 @@ export type SearchInputProps = TextInputProps & {
   /**
    * custom loader element
    */
-  renderLoaderElement?: (props?: any) => React.ReactElement;
+  renderLoaderElement?: () => React.ReactElement;
   /**
    * converts the colors of the search's input elements, icons and button to white
    */
diff --git a/src/index.ts b/src/index.ts
index 458b554e8d..0ba20f35c5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -132,7 +132,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, SearchInputPresets} from './components/searchInput';
+export {default as SearchInput, SearchInputProps, SearchInputRef} from './components/searchInput';
 export {default as SectionsWheelPicker, SectionsWheelPickerProps} from './components/sectionsWheelPicker';
 export {
   default as SegmentedControl,