react-native-ui-lib 7.38.0-snapshot.6221 → 7.38.0-snapshot.6240

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.0-snapshot.6221",
+  "version": "7.38.0-snapshot.6240",
   "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/PickerItemsList.js

@@ -1,3 +1,4 @@
+import _isUndefined from "lodash/isUndefined";
 import _times from "lodash/times";
 import _throttle from "lodash/throttle";
 import _isFunction from "lodash/isFunction";
@@ -33,6 +34,7 @@ const PickerItemsList = props => {
     useDialog,
     mode,
     testID,
+    selectionValidation,
     showLoader,
     customLoaderElement,
     renderCustomTopElement
@@ -116,7 +118,7 @@ const PickerItemsList = props => {
             {doneLabel ?? 'Select'}
           </Text>
         </View>;
-    } else if (!useDialog || mode === PickerModes.MULTI) {
+    } else if (_isUndefined(selectionValidation) && (!useDialog || mode === PickerModes.MULTI)) {
       return <Modal.TopBar testID={`${props.testID}.topBar`} {...topBarProps} />;
     }
   };

package/src/components/picker/helpers/usePickerDialogProps.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PickerProps } from '../types';
+type HookProps = PickerProps & {
+    shouldDisableDoneButton?: boolean;
+};
+declare const usePickerDialogProps: (props: HookProps, onDone: any) => import("../../touchableOpacity").TouchableOpacityProps & import("../../../incubator/dialog/types")._DialogPropsOld & {
+    expandableContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    useDialog?: boolean | undefined;
+    modalProps?: import("../../modal").ModalProps | undefined;
+    showTopBar?: boolean | undefined;
+    topBarProps?: import("../../modal").ModalTopBarProps | undefined;
+    renderCustomOverlay?: ((props: import("../../../incubator/expandableOverlay").RenderCustomOverlayProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined) | undefined;
+    disabled?: boolean | undefined;
+} & {
+    children?: React.ReactNode;
+};
+export default usePickerDialogProps;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { PickerModes } from "../types";
+import Button from "../../button";
+import { Colors } from "../../../style";
+const DIALOG_PROPS = {
+  bottom: true,
+  width: '100%',
+  useSafeArea: true
+};
+const usePickerDialogProps = (props, onDone) => {
+  const {
+    customPickerProps,
+    mode,
+    testID,
+    selectionOptions,
+    shouldDisableDoneButton
+  } = props;
+  const migrateDialog = customPickerProps?.migrateDialog;
+  const defaultProps = DIALOG_PROPS;
+  const {
+    validationMessage,
+    validationMessageStyle
+  } = selectionOptions || {};
+  const modifiedHeaderProps = migrateDialog && validationMessage && {
+    headerProps: {
+      trailingAccessory: validationMessage && <Button label="Save" link style={{
+        height: 30
+      }} onPress={mode === PickerModes.MULTI ? onDone : undefined} testID={`${testID}.dialog.header.save`} disabled={!shouldDisableDoneButton} />,
+      subtitle: !shouldDisableDoneButton && validationMessage,
+      subtitleStyle: [styles.validationMessage, validationMessageStyle],
+      ...customPickerProps?.dialogProps?.headerProps
+    }
+  };
+  const dialogProps = {
+    dialogProps: {
+      ...defaultProps,
+      ...customPickerProps?.dialogProps,
+      ...modifiedHeaderProps
+    }
+  };
+  return dialogProps;
+};
+export default usePickerDialogProps;
+const styles = StyleSheet.create({
+  validationMessage: {
+    color: Colors.red30
+  }
+});

package/src/components/picker/helpers/usePickerSelection.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { PickerProps, PickerValue, PickerSingleValue, PickerMultiValue } from '../types';
-interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
+interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode' | 'selectionValidation' | 'selectionOptions' | 'useDialog'> {
     pickerExpandableRef: RefObject<any>;
     setSearchValue: (searchValue: string) => void;
 }
@@ -9,5 +9,6 @@ declare const usePickerSelection: (props: UsePickerSelectionProps) => {
     onDoneSelecting: (item: PickerValue) => void;
     toggleItemSelection: (item: PickerSingleValue) => void;
     cancelSelect: () => void;
+    shouldDisableDoneButton: boolean | undefined;
 };
 export default usePickerSelection;

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

@@ -1,5 +1,7 @@
 import _xor from "lodash/xor";
 import _xorBy from "lodash/xorBy";
+import _isFunction from "lodash/isFunction";
+import _isUndefined from "lodash/isUndefined";
 import { useCallback, useState, useEffect } from 'react';
 import { PickerModes } from "../types";
 const usePickerSelection = props => {
@@ -11,22 +13,54 @@ const usePickerSelection = props => {
     pickerExpandableRef,
     getItemValue,
     setSearchValue,
-    mode
+    mode,
+    selectionValidation,
+    selectionOptions,
+    useDialog
   } = props;
+  const {
+    onValidationFailed,
+    validateOnStart,
+    onChangeValidity
+  } = selectionOptions || {};
   const [multiDraftValue, setMultiDraftValue] = useState(value);
   const [multiFinalValue, setMultiFinalValue] = useState(value);
+  const [isValid, setIsValid] = useState(undefined);
+  const _selectionValidation = item => {
+    if (useDialog) {
+      const isValid = selectionValidation?.(item);
+      if (!isValid) {
+        onValidationFailed?.(item);
+      }
+      setIsValid(isValid);
+    }
+  };
   useEffect(() => {
     if (mode === PickerModes.MULTI && multiFinalValue !== value) {
       setMultiDraftValue(value);
       setMultiFinalValue(value);
     }
   }, [value]);
+  useEffect(() => {
+    if (_isUndefined(selectionValidation)) {
+      setIsValid(true);
+    } else if (_isFunction(selectionValidation) && validateOnStart) {
+      _selectionValidation?.(value);
+    } else {
+      setIsValid(false);
+    }
+  }, []);
+  useEffect(() => {
+    if (isValid !== undefined) {
+      onChangeValidity?.(isValid);
+    }
+  }, [isValid]);
   const onDoneSelecting = useCallback(item => {
     setSearchValue('');
     setMultiFinalValue(item);
     pickerExpandableRef.current?.closeExpandable?.();
     onChange?.(item);
-  }, [onChange]);
+  }, [onChange, useDialog, selectionValidation]);
   const toggleItemSelection = useCallback(item => {
     let newValue;
     const itemAsArray = [item];
@@ -35,8 +69,9 @@ const usePickerSelection = props => {
     } else {
       newValue = _xor(multiDraftValue, itemAsArray);
     }
+    _selectionValidation(newValue);
     setMultiDraftValue(newValue);
-  }, [multiDraftValue, getItemValue]);
+  }, [multiDraftValue, getItemValue, useDialog, _selectionValidation]);
   const cancelSelect = useCallback(() => {
     setSearchValue('');
     setMultiDraftValue(multiFinalValue);
@@ -47,7 +82,8 @@ const usePickerSelection = props => {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    shouldDisableDoneButton: isValid
   };
 };
 export default usePickerSelection;

package/src/components/picker/index.js

@@ -10,19 +10,16 @@ import TextField from "../textField";
 import PickerItemsList from "./PickerItemsList";
 import PickerItem from "./PickerItem";
 import PickerContext from "./PickerContext";
-import usePickerSelection from "./helpers/usePickerSelection";
-import usePickerLabel from "./helpers/usePickerLabel";
-import usePickerSearch from "./helpers/usePickerSearch";
-import useImperativePickerHandle from "./helpers/useImperativePickerHandle";
+// import usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
 import useFieldType from "./helpers/useFieldType";
+import useImperativePickerHandle from "./helpers/useImperativePickerHandle";
 import useNewPickerProps from "./helpers/useNewPickerProps";
-// import usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
+import usePickerDialogProps from "./helpers/usePickerDialogProps";
+import usePickerLabel from "./helpers/usePickerLabel";
+import usePickerSearch from "./helpers/usePickerSearch";
+import usePickerSelection from "./helpers/usePickerSelection";
 import { extractPickerItems } from "./PickerPresenter";
 import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from "./types";
-const DEFAULT_DIALOG_PROPS = {
-  bottom: true,
-  width: '100%'
-};
 const Picker = React.forwardRef((props, ref) => {
   const themeProps = useThemeProps(props, 'Picker');
   const {
@@ -55,6 +52,8 @@ const Picker = React.forwardRef((props, ref) => {
     accessibilityLabel,
     accessibilityHint,
     items: propItems,
+    selectionValidation,
+    selectionOptions,
     showLoader,
     customLoaderElement,
     renderCustomTopElement,
@@ -101,7 +100,8 @@ const Picker = React.forwardRef((props, ref) => {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    shouldDisableDoneButton
   } = usePickerSelection({
     migrate,
     value,
@@ -110,8 +110,17 @@ const Picker = React.forwardRef((props, ref) => {
     getItemValue,
     topBarProps,
     setSearchValue,
-    mode
+    mode,
+    selectionValidation,
+    selectionOptions,
+    useDialog
   });
+  const {
+    dialogProps = {}
+  } = usePickerDialogProps({
+    ...themeProps,
+    shouldDisableDoneButton
+  }, () => onDoneSelecting(multiDraftValue));
   const {
     label,
     accessibilityInfo
@@ -201,12 +210,12 @@ const Picker = React.forwardRef((props, ref) => {
       ...topBarProps,
       onCancel: cancelSelect,
       onDone: mode === PickerModes.MULTI ? () => onDoneSelecting(multiDraftValue) : undefined
-    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement}>
+    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} selectionValidation={selectionValidation} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement}>
         {filteredItems}
       </PickerItemsList>;
   }, [testID, mode, useDialog, selectedItemPosition, topBarProps, cancelSelect, onDoneSelecting, multiDraftValue, showSearch, searchStyle, searchPlaceholder, _onSearchChange, renderCustomSearch, renderHeader, listProps, filteredItems, useSafeArea, useWheelPicker, items, showLoader]);
   return <PickerContext.Provider value={contextValue}>
-      {<ExpandableOverlay ref={pickerExpandable} useDialog={useDialog || useWheelPicker} dialogProps={DEFAULT_DIALOG_PROPS} migrateDialog expandableContent={expandableModalContent} renderCustomOverlay={renderOverlay ? _renderOverlay : undefined} onPress={onPress} testID={testID} {...customPickerProps} disabled={themeProps.editable === false}>
+      {<ExpandableOverlay ref={pickerExpandable} useDialog={useDialog || useWheelPicker} migrateDialog expandableContent={expandableModalContent} renderCustomOverlay={renderOverlay ? _renderOverlay : undefined} onPress={onPress} testID={testID} {...customPickerProps} dialogProps={dialogProps} disabled={themeProps.editable === false}>
           {renderTextField()}
         </ExpandableOverlay>}
     </PickerContext.Provider>;

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

@@ -147,7 +147,23 @@ type PickerExpandableOverlayProps = {
      */
     enableModalBlur?: boolean;
 };
-export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & PickerPropsDeprecation & PickerExpandableOverlayProps & PickerListProps & {
+type PickerSelectionOptions = Pick<TextFieldProps, 'validateOnStart' | 'onChangeValidity' | 'validationMessage' | 'validationMessageStyle'> & {
+    /**
+     * Callback for when field validated and failed
+     */
+    onValidationFailed?: (value: PickerValue) => void;
+};
+type PickerSelectionValidation = {
+    /**
+     * Callback for when selection was made
+     */
+    selectionValidation?: (value: PickerValue) => boolean;
+    /**
+     * Selection validation options
+     */
+    selectionOptions?: PickerSelectionOptions;
+};
+export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & PickerPropsDeprecation & PickerExpandableOverlayProps & PickerListProps & PickerSelectionValidation & {
     /**
      * Use dialog instead of modal picker
      */
@@ -287,7 +303,7 @@ export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value
     onSelectedLayout: (event: any) => any;
     selectionLimit: PickerProps['selectionLimit'];
 }
-export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
+export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'selectionValidation' | 'useDialog' | 'mode' | 'testID'> & {
     items?: {
         value: any;
         label: any;

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, SearchInputPresets } 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

@@ -178,10 +178,6 @@ var _exportNames = {
   RadioGroupProps: true,
   ScrollBar: true,
   ScrollBarProps: true,
-  SearchInput: true,
-  SearchInputProps: true,
-  SearchInputRef: true,
-  SearchInputPresets: true,
   SectionsWheelPicker: true,
   SectionsWheelPickerProps: true,
   SegmentedControl: true,
@@ -1210,30 +1206,6 @@ Object.defineProperty(exports, "ScrollBarProps", {
     return _scrollBar().ScrollBarProps;
   }
 });
-Object.defineProperty(exports, "SearchInput", {
-  enumerable: true,
-  get: function () {
-    return _searchInput().default;
-  }
-});
-Object.defineProperty(exports, "SearchInputPresets", {
-  enumerable: true,
-  get: function () {
-    return _searchInput().SearchInputPresets;
-  }
-});
-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 +2193,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/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/searchInput/index.d.ts

@@ -1,39 +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;
-    renderCustomRightElement?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
-    title?: string | undefined;
-    showLoader?: boolean | undefined;
-    loaderProps?: import("react-native").ActivityIndicatorProps | undefined;
-    renderLoaderElement?: (() => 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;
-    renderCustomRightElement?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
-    title?: string | undefined;
-    showLoader?: boolean | undefined;
-    loaderProps?: import("react-native").ActivityIndicatorProps | undefined;
-    renderLoaderElement?: (() => 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,220 +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,
-    renderCustomRightElement,
-    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.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() && renderCustomRightElement && renderCustomRightElement()}
-      </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 {
-      renderLoaderElement
-    } = props;
-    return <View>
-        {renderLoaderElement ? renderLoaderElement() : <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.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,60 +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": "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}",
-    "/>"
-  ]
-}

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

@@ -1,70 +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
-     */
-    renderCustomRightElement?: () => React.ReactElement;
-    /**
-     * Title prop
-     */
-    title?: string;
-    /**
-     * Whether to show a loader instead of the left search icon
-     */
-    showLoader?: boolean;
-    /**
-     * Loader props
-     */
-    loaderProps?: ActivityIndicatorProps;
-    /**
-     * 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}`;
-};

package/src/components/searchInput/types.js

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