@janiscommerce/ui-native 1.2.0 → 1.4.0

package/dist/src/components/Select/index.js

@@ -0,0 +1,178 @@
+/* istanbul ignore file */
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Keyboard, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { black, grey, primary } from '../../theme/palette';
+import { formatPlaceholderMulti } from './utils';
+import Options from './Components/Options';
+import Icon from '../Icon';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
+var KeyboardTypes;
+(function (KeyboardTypes) {
+    KeyboardTypes["Default"] = "default";
+    KeyboardTypes["NumberPad"] = "number-pad";
+    KeyboardTypes["DecimalPad"] = "decimal-pad";
+    KeyboardTypes["Numeric"] = "numeric";
+    KeyboardTypes["EmailAddress"] = "email-address";
+    KeyboardTypes["PhonePad"] = "phone-pad";
+    KeyboardTypes["URL"] = "url";
+})(KeyboardTypes || (KeyboardTypes = {}));
+export var VariantOptions;
+(function (VariantOptions) {
+    VariantOptions["Dropdown"] = "Dropdown";
+    VariantOptions["Modal"] = "Modal";
+})(VariantOptions || (VariantOptions = {}));
+const Select = ({ options, label, value = null, variantOptions = VariantOptions.Dropdown, placeholder = '', optionStyles = {}, inputProps = {}, isMulti = false, isDisabled = false, noOptionsMessage = 'no options', multiOptionsText = null, keyboardType = KeyboardTypes.Default, onFocus = () => { }, onSelectOption = () => { }, customOptionComponent = null, modalAcceptText = 'accept', ...props }) => {
+    const [inputValue, setInputValue] = useState('');
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [isShowedOptions, setIsShowedOptions] = useState(false);
+    const [dropdownMeasures, setDropdownMeasures] = useState({
+        width: 0,
+        pageY: 0,
+        pageX: 0,
+    });
+    const inputRef = useRef(null);
+    const hasDefaultValue = !!value?.length && options?.some((option) => option?.label === value[0]?.label);
+    const isMoveLabel = isShowedOptions || inputValue;
+    const showDeleteIcon = isDisabled ? false : !!inputValue && !!selectedOptions?.length;
+    const isArrowRotated = isShowedOptions ? '180deg' : '0deg';
+    const filterOptions = (textValue) => {
+        if (typeof textValue !== 'string' || !textValue.length) {
+            return setFilteredOptions(options);
+        }
+        const filtered = options?.filter((option) => option.label.toLowerCase().includes(textValue.toLowerCase()));
+        return setFilteredOptions(filtered);
+    };
+    const handleChange = (textValue) => {
+        setInputValue(textValue);
+        filterOptions(textValue);
+    };
+    const handleOnFocus = () => {
+        Keyboard.dismiss();
+        setIsShowedOptions(true);
+        onFocus();
+    };
+    const setSingleOption = (option) => {
+        setIsShowedOptions(false);
+        setSelectedOptions([option]);
+        setInputValue(option.label);
+    };
+    const setMultiOptions = (option) => {
+        const optionMatcher = !!selectedOptions.find((previewOption) => previewOption.value === option.value);
+        const updateOption = optionMatcher
+            ? selectedOptions.filter((previewOption) => previewOption.value !== option.value)
+            : [...selectedOptions, option];
+        setSelectedOptions(updateOption);
+        setInputValue(formatPlaceholderMulti(updateOption, multiOptionsText));
+    };
+    const handleSelectedOption = (option) => isMulti ? setMultiOptions(option) : setSingleOption(option);
+    const handleCloseDropdown = () => {
+        if (isDisabled) {
+            return null;
+        }
+        setIsShowedOptions(!isShowedOptions);
+        inputRef.current?.blur();
+    };
+    const handleResetOptions = () => {
+        setIsShowedOptions(false);
+        setInputValue('');
+        setSelectedOptions([]);
+    };
+    const memoizedSelectedOptions = useCallback(() => {
+        if (!!selectedOptions?.length && !!inputValue) {
+            onSelectOption(selectedOptions);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedOptions]);
+    useEffect(() => {
+        memoizedSelectedOptions();
+    }, [selectedOptions, memoizedSelectedOptions]);
+    useEffect(() => {
+        if (hasDefaultValue) {
+            setSelectedOptions(value);
+            setInputValue(formatPlaceholderMulti(value, multiOptionsText));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasDefaultValue, value]);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.measure((x, y, width, height, pageX, pageY) => setDropdownMeasures({ width, pageX, pageY: pageY - 15 }));
+        }
+    }, [isShowedOptions]);
+    const moveLabel = isMoveLabel ? 38 : 10;
+    const validFontSize = scaledForDevice(16, moderateScale);
+    const validMarginBottom = scaledForDevice(10, moderateScale);
+    const validMarginTop = scaledForDevice(18, moderateScale);
+    const validHeightLabel = scaledForDevice(19, moderateScale);
+    const validPadding = scaledForDevice(8, moderateScale);
+    const validBottomLabel = scaledForDevice(moveLabel, moderateScale);
+    const validHeightInput = scaledForDevice(38, moderateScale);
+    const validRight = scaledForDevice(30, horizontalScale);
+    const validBorderBottomWidth = scaledForDevice(1, moderateScale);
+    const styles = StyleSheet.create({
+        wrapper: {
+            width: '100%',
+            marginBottom: validMarginBottom,
+            position: 'relative',
+            zIndex: isShowedOptions ? 10 : 0,
+        },
+        wrapperInput: {
+            position: 'relative',
+            width: '100%',
+            marginBottom: 0,
+            marginTop: validMarginTop,
+        },
+        label: {
+            position: 'absolute',
+            color: isMoveLabel && !isDisabled ? primary.main : black.main,
+            fontSize: validFontSize,
+            lineHeight: validHeightLabel,
+            letterSpacing: 0,
+            left: 0,
+            fontWeight: isMoveLabel ? '600' : '400',
+            bottom: validBottomLabel,
+        },
+        input: {
+            width: '100%',
+            height: validHeightInput,
+            padding: 0,
+            fontSize: validFontSize,
+            lineHeight: validHeightLabel,
+            letterSpacing: 0,
+            borderBottomWidth: validBorderBottomWidth,
+            color: black.main,
+            borderBottomColor: isShowedOptions ? primary.main : grey[200],
+        },
+        arrowIcon: {
+            position: 'absolute',
+            padding: validPadding,
+            right: 0,
+            bottom: 0,
+            zIndex: 1,
+            transform: [{ rotate: isArrowRotated }],
+        },
+        deleteIcon: {
+            position: 'absolute',
+            padding: validPadding,
+            right: validRight,
+            bottom: 0,
+            zIndex: 1,
+        },
+    });
+    return (<View style={styles.wrapper} {...props}>
+			<View style={styles.wrapperInput}>
+				{isMulti && showDeleteIcon && (<Pressable onPress={handleResetOptions} style={styles.deleteIcon}>
+						<Icon size={20} color={black.main} name="cross_circle_flat"/>
+					</Pressable>)}
+				<Pressable style={styles.arrowIcon} onPress={handleCloseDropdown}>
+					<Icon size={20} color={isDisabled ? black.main : primary.main} name="chevron_down"/>
+				</Pressable>
+
+				<Text style={styles.label}>{label}</Text>
+				<TextInput ref={inputRef} style={styles.input} value={inputValue} placeholder={isMoveLabel && placeholder} showSoftInputOnFocus={false} caretHidden={true} keyboardType={keyboardType} editable={!isDisabled} onFocus={handleOnFocus} onChangeText={handleChange} {...inputProps}/>
+			</View>
+
+			<Options variantOptions={variantOptions} dropdownMeasures={dropdownMeasures} setIsShowedOptions={setIsShowedOptions} isShowedOptions={isShowedOptions} filteredOptions={filteredOptions} selectedOptions={selectedOptions} noOptionsMessage={noOptionsMessage} optionStyles={optionStyles} callbackOption={handleSelectedOption} customOptionComponent={customOptionComponent} isMulti={isMulti} modalAcceptText={modalAcceptText}/>
+		</View>);
+};
+export default Select;

package/dist/{components → src/components}/Select/utils/index.d.ts

@@ -1,2 +1,2 @@
 import { Option } from '..';
-export declare const formatPlaceholderMulti: (options: Option[], optionsText: string) => string;
+export declare const formatPlaceholderMulti: (options: Option[], optionsText: string | null) => string;

package/dist/src/components/Select/utils/index.js

@@ -0,0 +1,7 @@
+export const formatPlaceholderMulti = (options, optionsText) => {
+    if (!options.length) {
+        return '';
+    }
+    const validOptionText = `(+${options.length - 1}${optionsText ? ` ${optionsText}` : ''})`;
+    return options.length > 1 ? `${options[0].label}  ${validOptionText}` : options[0].label;
+};

package/dist/{components → src/components}/StatusChip/index.js

@@ -2,21 +2,28 @@ import React, { isValidElement } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { base, grey, primary } from '../../theme/palette';
 import Text from '../Text';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
+const validHeight = scaledForDevice(24, moderateScale);
+const validPadding = scaledForDevice(12, horizontalScale);
+const validBorderRadius = scaledForDevice(12, moderateScale);
+const validBorderWidth = scaledForDevice(1, moderateScale);
+const validFontSize = scaledForDevice(13, moderateScale);
+const validLineHeight = scaledForDevice(18, moderateScale);
 const styles = ({ background }) => StyleSheet.create({
     ViewStyles: {
-        height: 24,
+        height: validHeight,
         flexDirection: 'row',
         alignItems: 'center',
-        paddingLeft: 12,
-        paddingRight: 12,
-        borderRadius: 12,
+        paddingLeft: validPadding,
+        paddingRight: validPadding,
+        borderRadius: validBorderRadius,
         backgroundColor: background ?? base.white,
-        borderWidth: 1,
+        borderWidth: validBorderWidth,
         borderColor: background ?? grey['300'],
     },
     TextStyles: {
-        fontSize: 13,
-        lineHeight: 18,
+        fontSize: validFontSize,
+        lineHeight: validLineHeight,
         fontFamily: 'Roboto',
         fontWeight: '900',
         textAlign: 'center',

package/dist/{components → src/components}/Svg/index.js

@@ -7,6 +7,7 @@ import JanisLogo from './svgs/JanisLogo';
 import JanisLogoColor from './svgs/JanisLogoColor';
 import LoginIllustration from './svgs/LoginIllustration';
 import NoNotifications from './svgs/NoNotifications';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
 const svgs = {
     'empty-illustration': EmptyIllustration,
     'empty-list-illustration': EmptyListIllustration,
@@ -20,8 +21,14 @@ const Svg = ({ name, width, height, size, ...props }) => {
         return null;
     }
     const SvgSelected = svgs[name];
+    const selectedWidth = size ?? width;
+    const selectedHeight = size ?? height;
+    const parseSelectedWidth = selectedWidth || 0;
+    const parseSelectedHeight = selectedHeight || 0;
+    const validateWidth = scaledForDevice(parseSelectedWidth, horizontalScale);
+    const validateHeight = scaledForDevice(parseSelectedHeight, moderateScale);
     return (<View {...props}>
-			<SvgSelected width={size ?? width} height={size ?? height} {...props}/>
+			<SvgSelected width={validateWidth} height={validateHeight} {...props}/>
 		</View>);
 };
 export default Svg;

package/dist/{components → src/components}/Text/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { StyleSheet, Text as TextComponent, } from 'react-native';
+import { moderateScale, scaledForDevice } from '../../scale';
 const Text = ({ children, style, ...props }) => {
     if (!children) {
         return null;
     }
+    const validFontSize = scaledForDevice(13, moderateScale);
     const styles = StyleSheet.create({
         TextStyles: {
-            fontSize: 13,
+            fontSize: validFontSize,
             fontFamily: 'Roboto',
         },
     });

package/dist/{index.d.ts → src/index.d.ts}

@@ -17,4 +17,5 @@ import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
 import BaseButton from './components/BaseButton';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, };
+import * as getScale from './scale';
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, };

package/dist/{index.js → src/index.js}

@@ -17,4 +17,5 @@ import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
 import BaseButton from './components/BaseButton';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, };
+import * as getScale from './scale';
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, };

package/dist/src/scale/index.d.ts

@@ -0,0 +1,8 @@
+declare const isIOS: boolean;
+declare const viewportWidth: number, viewportHeight: number;
+declare const isSmallDevice: (minWidth?: number) => boolean;
+declare const horizontalScale: (size: number) => number;
+declare const verticalScale: (size: number) => number;
+declare const moderateScale: (size: number, factor?: number) => number;
+declare const scaledForDevice: (size: number, scaleCallback: (size: number) => number) => number;
+export { isIOS, viewportWidth, viewportHeight, isSmallDevice, horizontalScale, verticalScale, moderateScale, scaledForDevice, };

package/dist/src/scale/index.js

@@ -0,0 +1,13 @@
+import { Dimensions, PixelRatio, Platform } from 'react-native';
+import { WEB_MODE } from '../../env.json';
+const guidelineBaseWidth = 360;
+const guidelineBaseHeight = 720;
+const isIOS = Platform.OS === 'ios';
+const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
+const isSmallDevice = (minWidth = 365) => viewportWidth <= minWidth;
+const horizontalScale = (size) => PixelRatio.roundToNearestPixel((viewportWidth / guidelineBaseWidth) * size);
+const verticalScale = (size) => PixelRatio.roundToNearestPixel((viewportHeight / guidelineBaseHeight) * size);
+const moderateScale = (size, factor = 1) => size + (horizontalScale(size) - size) * factor;
+/* istanbul ignore next */
+const scaledForDevice = (size, scaleCallback) => WEB_MODE ? size : scaleCallback(size);
+export { isIOS, viewportWidth, viewportHeight, isSmallDevice, horizontalScale, verticalScale, moderateScale, scaledForDevice, };

package/dist/{theme → src/theme}/palette.js

@@ -6,12 +6,13 @@ const primary = {
 const black = {
     main: '#2F2F2F',
     dark: '#050505',
+    semiTransparent: '#0000001a',
 };
 const white = {
     main: '#E8EAF6',
     dark: '#D0D3E3',
     light: '#F4F5FB',
-    semiTransparent: 'rgba(255, 255, 255, 0.75)',
+    semiTransparent: '#ffffffbf',
 };
 const grey = {
     100: '#DDDFE2',

package/dist/{ts → src/ts}/interfaces/colors.d.ts

@@ -19,8 +19,6 @@ export interface gamaColor {
     main: string;
     dark: string;
 }
-export interface Black extends gamaColor {
-}
 export interface Success extends gamaColor {
 }
 export interface Error extends gamaColor {
@@ -35,3 +33,6 @@ export interface Primary extends gamaColor {
 export interface White extends Primary {
     semiTransparent: string;
 }
+export interface Black extends gamaColor {
+    semiTransparent: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.2.0",
+	"version": "1.4.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -23,8 +23,8 @@
 		"storybook-server": "react-native-storybook-server",
 		"storybook-watcher": "sb-rn-watcher --config-path .ondevice",
 		"update-stories": "sb-rn-get-stories --config-path .ondevice",
-		"storybook-web": " npm run storybook-web-build && start-storybook -p 6006 --config-dir ./.storybook",
-		"storybook-web-build": "build-storybook --config-dir ./.storybook --output-dir ./.storybook_static",
+		"storybook-web": "node scripts/set-app-mode.js web && npm run storybook-web-build && start-storybook -p 6006 --config-dir ./.storybook",
+		"storybook-web-build": "node scripts/set-app-mode.js web && build-storybook --config-dir ./.storybook --output-dir ./.storybook_static",
 		"storybook-web-docs": "build-storybook --config-dir ./.storybook --output-dir ./docs"
 	},
 	"repository": {

package/dist/components/Select/Components/Dropdown/index.d.ts

@@ -1,13 +0,0 @@
-import { FC } from 'react';
-import { CustomOptionComponent, Option } from '../..';
-interface DropdownProps {
-    isShowedDropdown: boolean;
-    filteredOptions: Option[];
-    selectedOptions: Option[];
-    noOptionsMessage: string;
-    optionStyles?: {};
-    callbackOption: (option: Option) => void;
-    customOptionComponent?: CustomOptionComponent | null;
-}
-declare const Dropdown: FC<DropdownProps>;
-export default Dropdown;

package/dist/components/Select/Components/Icons/Chevron/index.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-interface IconProps {
-    color?: string;
-    size?: number;
-    iconStyles?: {};
-    style?: ViewStyle;
-    onPress?: () => void;
-}
-declare const Chevron: {
-    ({ style, color, size, onPress, ...props }: IconProps): React.JSX.Element;
-    defaultProps: {
-        color: string;
-        size: number;
-        onPress: () => void;
-    };
-};
-export default Chevron;

package/dist/components/Select/Components/Icons/Chevron/index.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-import { primary } from '../../../../../theme/palette';
-import Svg, { Path } from 'react-native-svg';
-const Chevron = ({ style, color, size, onPress, ...props }) => {
-    return (<Pressable onPress={onPress} style={style} {...props}>
-			<View>
-				<Svg width={size} height={size} viewBox="0 0 16 16">
-					<Path d="M8.17432 11.1055L3 6.49316L4.33106 5L8.17627 8.42773L12.0132 5.01904L13.3413 6.51416L8.17432 11.1055Z" fill={color}/>
-				</Svg>
-			</View>
-		</Pressable>);
-};
-Chevron.defaultProps = {
-    color: primary.main,
-    size: 21,
-    onPress: () => { },
-};
-export default Chevron;

package/dist/components/Select/Components/Icons/Delete/index.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-interface IconProps {
-    color?: string;
-    size?: number;
-    iconStyles?: {};
-    style?: ViewStyle;
-    onPress?: () => void;
-}
-declare const Delete: {
-    ({ style, color, size, onPress, ...props }: IconProps): React.JSX.Element;
-    defaultProps: {
-        color: string;
-        size: number;
-        onPress: () => void;
-    };
-};
-export default Delete;

package/dist/components/Select/Components/Icons/Delete/index.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-import { black } from '../../../../../theme/palette';
-import Svg, { Path } from 'react-native-svg';
-const Delete = ({ style, color, size, onPress, ...props }) => {
-    return (<Pressable onPress={onPress} style={style} {...props}>
-			<View>
-				<Svg width={size} height={size} viewBox="0 0 16 16">
-					<Path fill-rule="evenodd" clip-rule="evenodd" d="M1 8C1 4.13403 4.13397 1 8 1C11.866 1 15 4.13403 15 8C15 11.866 11.866 15 8 15C4.13397 15 1 11.866 1 8ZM10.03 11.4441L11.4441 10.03L9.41406 8L11.4441 5.96997L10.03 4.55591L8 6.58594L5.96997 4.55591L4.55591 5.96997L6.58594 8L4.55591 10.03L5.96997 11.4441L8 9.41406L10.03 11.4441Z" fill={color}/>
-				</Svg>
-			</View>
-		</Pressable>);
-};
-Delete.defaultProps = {
-    color: black.main,
-    size: 21,
-    onPress: () => { },
-};
-export default Delete;

package/dist/components/Select/index.js

@@ -1,148 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Keyboard, StyleSheet, Text, TextInput, View } from 'react-native';
-import { black, grey, primary } from '../../theme/palette';
-import { formatPlaceholderMulti } from './utils';
-import ChevronIcon from './Components/Icons/Chevron';
-import DeleteIcon from './Components/Icons/Delete';
-import Dropdown from './Components/Dropdown';
-var KeyboardTypes;
-(function (KeyboardTypes) {
-    KeyboardTypes["Default"] = "default";
-    KeyboardTypes["NumberPad"] = "number-pad";
-    KeyboardTypes["DecimalPad"] = "decimal-pad";
-    KeyboardTypes["Numeric"] = "numeric";
-    KeyboardTypes["EmailAddress"] = "email-address";
-    KeyboardTypes["PhonePad"] = "phone-pad";
-    KeyboardTypes["URL"] = "url";
-})(KeyboardTypes || (KeyboardTypes = {}));
-const Select = ({ options, label, value = null, placeholder = '', optionStyles = {}, inputProps = {}, isSearchable = false, isMulti = false, isDisabled = false, noOptionsMessage = 'no options', multiOptionsText = '', keyboardType = KeyboardTypes.Default, onFocus = () => { }, onSelectOption = () => { }, customOptionComponent = null, ...props }) => {
-    const [inputValue, setInputValue] = useState('');
-    const [selectedOptions, setSelectedOptions] = useState([]);
-    const [filteredOptions, setFilteredOptions] = useState(options);
-    const [isShowedDropdown, setIsShowedDropdown] = useState(false);
-    const inputRef = useRef(null);
-    const hasDefaultValue = value && options?.find((option) => option.label === value);
-    const isMoveLabel = isShowedDropdown || inputValue;
-    const showDeleteIcon = isDisabled ? false : !!inputValue && !!selectedOptions?.length;
-    const isArrowRotated = isShowedDropdown ? '180deg' : '0deg';
-    const filterOptions = (textValue) => {
-        if (typeof textValue !== 'string' || !textValue.length) {
-            return setFilteredOptions(options);
-        }
-        const filtered = options?.filter((option) => option.label.toLowerCase().includes(textValue.toLowerCase()));
-        return setFilteredOptions(filtered);
-    };
-    const handleChange = (textValue) => {
-        setInputValue(textValue);
-        filterOptions(textValue);
-    };
-    const handleOnFocus = () => {
-        if (!isSearchable || isMulti) {
-            Keyboard.dismiss();
-        }
-        onFocus();
-        setIsShowedDropdown(true);
-    };
-    const setSingleOption = (option) => {
-        setIsShowedDropdown(false);
-        setSelectedOptions([option]);
-        setInputValue(option.label);
-    };
-    const setMultiOptions = (option) => {
-        const optionMatcher = selectedOptions.some((previewOption) => previewOption === option);
-        const updateOption = optionMatcher
-            ? selectedOptions.filter((previewOption) => previewOption !== option)
-            : [...selectedOptions, option];
-        setSelectedOptions(updateOption);
-        setInputValue(formatPlaceholderMulti(updateOption, multiOptionsText));
-    };
-    const handleSelectedOption = (option) => isMulti ? setMultiOptions(option) : setSingleOption(option);
-    const handleCloseDropdown = () => {
-        if (isDisabled) {
-            return null;
-        }
-        setIsShowedDropdown(!isShowedDropdown);
-        inputRef.current?.blur();
-    };
-    const handleResetOptions = () => {
-        setIsShowedDropdown(false);
-        setInputValue('');
-        setSelectedOptions([]);
-    };
-    const memoizedSelectedOptions = useCallback(() => {
-        if (!!selectedOptions?.length && !!inputValue) {
-            onSelectOption(selectedOptions);
-        }
-    }, [inputValue, onSelectOption, selectedOptions]);
-    useEffect(() => {
-        memoizedSelectedOptions();
-    }, [selectedOptions, inputValue, memoizedSelectedOptions]);
-    useEffect(() => {
-        if (hasDefaultValue) {
-            setSelectedOptions([hasDefaultValue]);
-            setInputValue(value);
-        }
-    }, [hasDefaultValue, value]);
-    const styles = StyleSheet.create({
-        wrapper: {
-            width: '100%',
-            marginBottom: 10,
-            position: 'relative',
-            zIndex: isShowedDropdown ? 10 : 0,
-        },
-        wrapperInput: {
-            position: 'relative',
-            width: '100%',
-            marginBottom: 0,
-            marginTop: 18,
-        },
-        label: {
-            position: 'absolute',
-            color: isMoveLabel && !isDisabled ? primary.main : black.main,
-            fontSize: 16,
-            lineHeight: 19,
-            letterSpacing: 0,
-            left: 0,
-            fontWeight: isMoveLabel ? '600' : '400',
-            bottom: isMoveLabel ? 38 : 10,
-        },
-        input: {
-            width: '100%',
-            height: 38,
-            padding: 0,
-            fontSize: 16,
-            lineHeight: 19,
-            letterSpacing: 0,
-            borderBottomWidth: 1,
-            color: black.main,
-            borderBottomColor: isShowedDropdown ? primary.main : grey[200],
-        },
-        arrowIcon: {
-            position: 'absolute',
-            padding: 8,
-            right: 0,
-            bottom: 0,
-            zIndex: 1,
-            transform: [{ rotate: isArrowRotated }],
-        },
-        deleteIcon: {
-            position: 'absolute',
-            padding: 8,
-            right: 30,
-            bottom: 0,
-            zIndex: 1,
-        },
-    });
-    return (<View style={styles.wrapper}>
-			<View style={styles.wrapperInput} {...props}>
-				{showDeleteIcon && <DeleteIcon style={styles.deleteIcon} onPress={handleResetOptions}/>}
-				<ChevronIcon style={styles.arrowIcon} color={isDisabled ? black.main : primary.main} onPress={handleCloseDropdown}/>
-
-				<Text style={styles.label}>{label}</Text>
-				<TextInput ref={inputRef} style={styles.input} value={inputValue} placeholder={isMoveLabel && placeholder} showSoftInputOnFocus={!isMulti && isSearchable} caretHidden={!isSearchable} keyboardType={keyboardType} editable={!isDisabled} onFocus={handleOnFocus} onChangeText={handleChange} {...inputProps}/>
-			</View>
-
-			<Dropdown isShowedDropdown={isShowedDropdown} filteredOptions={filteredOptions} selectedOptions={selectedOptions} noOptionsMessage={noOptionsMessage} optionStyles={optionStyles} callbackOption={handleSelectedOption} customOptionComponent={customOptionComponent}/>
-		</View>);
-};
-export default Select;

package/dist/components/Select/utils/index.js

@@ -1,8 +0,0 @@
-export const formatPlaceholderMulti = (options, optionsText) => {
-    if (!options.length) {
-        return '';
-    }
-    return options.length > 1
-        ? `${options[0].label}  (+${options.length - 1} ${optionsText})`
-        : options[0].label;
-};