@janiscommerce/ui-native 1.3.0 → 1.5.0

package/dist/components/Select/Components/Modal/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Modal as ModalComponent, StyleSheet, View } from 'react-native';
+import { base, primary, white } from '../../../../theme/palette';
+import BaseButton from '../../../BaseButton';
+import { moderateScale, scaledForDevice } from '../../../../scale';
+const Modal = ({ show, setShow, isMulti, modalAcceptText, children }) => {
+    const validBottom = scaledForDevice(20, moderateScale);
+    const validMinWidth = scaledForDevice(270, moderateScale);
+    const validPaddingTop = scaledForDevice(24, moderateScale);
+    const validPaddingBottom = scaledForDevice(12, moderateScale);
+    const validPaddingHorizontal = scaledForDevice(20, moderateScale);
+    const validLeft = scaledForDevice(8, moderateScale);
+    const validTop = scaledForDevice(4, moderateScale);
+    const validFontSize = scaledForDevice(13, moderateScale);
+    const styles = StyleSheet.create({
+        background: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#0009',
+        },
+        containerModal: {
+            justifyContent: 'space-between',
+        },
+        contentWrapper: {
+            bottom: validBottom,
+            minWidth: validMinWidth,
+            paddingTop: validPaddingTop,
+            paddingBottom: validPaddingBottom,
+            paddingLeft: validPaddingHorizontal,
+            paddingRight: validPaddingHorizontal,
+            backgroundColor: base.white,
+            elevation: 5,
+        },
+        buttonWrapper: {
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            flexWrap: 'wrap',
+            left: validLeft,
+            top: validTop,
+        },
+        button: {
+            backgroundColor: base.white,
+        },
+        buttonText: {
+            color: primary.main,
+            fontSize: validFontSize,
+            fontWeight: '700',
+            textTransform: 'uppercase',
+        },
+    });
+    return (<ModalComponent animationType="fade" transparent visible={show}>
+			<View style={styles.background}>
+				<View style={styles.contentWrapper}>
+					<View style={styles.containerModal}>{children}</View>
+					{isMulti && (<View style={styles.buttonWrapper}>
+							<BaseButton title={modalAcceptText} iconRight={false} pressedColor={white.main} style={styles.button} textStyle={styles.buttonText} onPress={() => setShow(false)}/>
+						</View>)}
+				</View>
+			</View>
+		</ModalComponent>);
+};
+export default Modal;

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

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { CustomOptionComponent, DropdownMeasures, Option, VariantOptions } from '../..';
+interface OptionsProps {
+    variantOptions: VariantOptions;
+    dropdownMeasures: DropdownMeasures;
+    isShowedOptions: boolean;
+    setIsShowedOptions: (isShowed: boolean) => void;
+    filteredOptions: Option[];
+    selectedOptions: Option[];
+    noOptionsMessage: string;
+    optionStyles?: {};
+    callbackOption: (option: Option) => void;
+    customOptionComponent?: CustomOptionComponent | null;
+    isMulti: boolean;
+    modalAcceptText: string;
+}
+declare const Options: FC<OptionsProps>;
+export default Options;

package/dist/{src/components/Select/Components/Dropdown → components/Select/Components/Options}/index.js

@@ -1,57 +1,45 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
 import { base, black, grey, primary, white } from '../../../../theme/palette';
-import { horizontalScale, moderateScale, scaledForDevice } from '../../../../scale';
-const Dropdown = (props) => {
-    const { isShowedDropdown, filteredOptions, callbackOption, selectedOptions, noOptionsMessage, optionStyles, customOptionComponent = null, } = props;
-    if (!isShowedDropdown) {
-        return null;
-    }
+import SwitcherComponent from '../SwitcherComponent';
+const Options = (props) => {
+    const { variantOptions, dropdownMeasures, isShowedOptions, setIsShowedOptions, filteredOptions, callbackOption, selectedOptions, noOptionsMessage, optionStyles, customOptionComponent = null, isMulti, modalAcceptText, } = props;
     const handleSelectedOption = (option) => callbackOption(option);
-    const validPadding = scaledForDevice(8, moderateScale);
-    const validMaxHeight = scaledForDevice(168, moderateScale);
-    const validTop = scaledForDevice(60, moderateScale);
-    const validMarginBottom = scaledForDevice(20, moderateScale);
-    const validElevation = scaledForDevice(5, moderateScale);
-    const validHeight = scaledForDevice(42, moderateScale);
-    const validLeft = scaledForDevice(8, horizontalScale);
-    const validFontSize = scaledForDevice(14, moderateScale);
-    const validPaddingVertical = scaledForDevice(10, moderateScale);
+    const isModal = variantOptions === 'Modal';
     const styles = StyleSheet.create({
         container: {
+            position: 'relative',
             width: '100%',
-            padding: validPadding,
+            padding: !isModal ? 8 : 0,
         },
         optionWrapper: {
-            position: 'absolute',
-            maxHeight: validMaxHeight,
+            position: !isModal ? 'absolute' : 'relative',
+            maxHeight: 168,
+            minHeight: 'auto',
             borderColor: grey[200],
             backgroundColor: base.white,
             width: '100%',
-            top: validTop,
-            marginBottom: validMarginBottom,
-            elevation: validElevation,
-            zIndex: 10,
+            top: !isModal ? 60 : 0,
+            marginBottom: 20,
+            elevation: !isModal ? 5 : 0,
             flex: 1,
         },
         option: {
             width: '100%',
-            height: validHeight,
+            height: 42,
             justifyContent: 'center',
             alignItems: 'stretch',
-            paddingLeft: validLeft,
+            paddingLeft: 8,
         },
         optionText: {
-            fontSize: validFontSize,
             color: black.main,
             fontWeight: '400',
         },
         noOptionText: {
-            fontSize: validFontSize,
             color: grey[500],
             fontWeight: '400',
-            paddingLeft: validLeft,
-            paddingVertical: validPaddingVertical,
+            paddingLeft: 8,
+            paddingVertical: 10,
         },
     });
     const renderOptions = filteredOptions?.length &&
@@ -78,8 +66,10 @@ const Dropdown = (props) => {
     const noRenderOptions = (<View aria-disabled>
 			<Text style={styles.noOptionText}> {noOptionsMessage}</Text>
 		</View>);
-    return (<ScrollView style={styles.optionWrapper} contentContainerStyle={styles.container}>
-			{filteredOptions?.length ? renderOptions : noRenderOptions}
-		</ScrollView>);
+    return (<SwitcherComponent measures={dropdownMeasures} variant={variantOptions} show={isShowedOptions} setShow={setIsShowedOptions} isMulti={isMulti} modalAcceptText={modalAcceptText}>
+			<ScrollView style={styles.optionWrapper} contentContainerStyle={styles.container}>
+				{filteredOptions?.length ? renderOptions : noRenderOptions}
+			</ScrollView>
+		</SwitcherComponent>);
 };
-export default Dropdown;
+export default Options;

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

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { DropdownMeasures, VariantOptions } from '../..';
+interface SwitcherProps {
+    show: boolean;
+    isMulti: boolean;
+    variant: VariantOptions;
+    measures: DropdownMeasures;
+    children: React.Component | React.ReactNode;
+    modalAcceptText: string;
+    setShow: (isShowed: boolean) => void;
+}
+declare const SwitcherComponent: FC<SwitcherProps>;
+export default SwitcherComponent;

package/dist/components/Select/Components/SwitcherComponent/index.js

@@ -0,0 +1,8 @@
+import Dropdown from '../Dropdown';
+import Modal from '../Modal';
+const components = {
+    Dropdown,
+    Modal,
+};
+const SwitcherComponent = (props) => components[props?.variant](props);
+export default SwitcherComponent;

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

@@ -9,6 +9,15 @@ declare enum KeyboardTypes {
     PhonePad = "phone-pad",
     URL = "url"
 }
+export declare enum VariantOptions {
+    Dropdown = "Dropdown",
+    Modal = "Modal"
+}
+export interface DropdownMeasures {
+    width: number;
+    pageY: number;
+    pageX: number;
+}
 export interface Option {
     label: string;
     value: string | number;
@@ -23,11 +32,11 @@ export type CustomOptionComponent = (props: CustomOptionComponentProps) => React
 interface SelectProps {
     options: Option[];
     label: string;
-    value?: string;
+    value?: Option[];
+    variantOptions?: VariantOptions;
     optionStyles?: {};
     placeholder?: string;
     inputProps?: TextInput;
-    isSearchable?: boolean;
     isMulti?: boolean;
     isDisabled?: boolean;
     noOptionsMessage?: string;
@@ -36,6 +45,7 @@ interface SelectProps {
     onFocus?: () => void;
     onSelectOption?: (selectedOptions: Option[]) => void;
     customOptionComponent?: CustomOptionComponent | null;
+    modalAcceptText?: string;
 }
 declare const Select: FC<SelectProps>;
 export default Select;

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

@@ -1,11 +1,10 @@
 /* istanbul ignore file */
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Keyboard, StyleSheet, Text, TextInput, View } from 'react-native';
+import { Keyboard, Pressable, 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';
+import Options from './Components/Options';
+import Icon from '../Icon';
 import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
 var KeyboardTypes;
 (function (KeyboardTypes) {
@@ -17,16 +16,26 @@ var KeyboardTypes;
     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 }) => {
+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 [isShowedDropdown, setIsShowedDropdown] = useState(false);
+    const [isShowedOptions, setIsShowedOptions] = useState(false);
+    const [dropdownMeasures, setDropdownMeasures] = useState({
+        width: 0,
+        pageY: 0,
+        pageX: 0,
+    });
     const inputRef = useRef(null);
-    const hasDefaultValue = value && options?.find((option) => option.label === value);
-    const isMoveLabel = isShowedDropdown || inputValue;
+    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 = isShowedDropdown ? '180deg' : '0deg';
+    const isArrowRotated = isShowedOptions ? '180deg' : '0deg';
     const filterOptions = (textValue) => {
         if (typeof textValue !== 'string' || !textValue.length) {
             return setFilteredOptions(options);
@@ -39,21 +48,19 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
         filterOptions(textValue);
     };
     const handleOnFocus = () => {
-        if (!isSearchable || isMulti) {
-            Keyboard.dismiss();
-        }
+        Keyboard.dismiss();
+        setIsShowedOptions(true);
         onFocus();
-        setIsShowedDropdown(true);
     };
     const setSingleOption = (option) => {
-        setIsShowedDropdown(false);
+        setIsShowedOptions(false);
         setSelectedOptions([option]);
         setInputValue(option.label);
     };
     const setMultiOptions = (option) => {
-        const optionMatcher = selectedOptions.some((previewOption) => previewOption === option);
+        const optionMatcher = !!selectedOptions.find((previewOption) => previewOption.value === option.value);
         const updateOption = optionMatcher
-            ? selectedOptions.filter((previewOption) => previewOption !== option)
+            ? selectedOptions.filter((previewOption) => previewOption.value !== option.value)
             : [...selectedOptions, option];
         setSelectedOptions(updateOption);
         setInputValue(formatPlaceholderMulti(updateOption, multiOptionsText));
@@ -63,11 +70,11 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
         if (isDisabled) {
             return null;
         }
-        setIsShowedDropdown(!isShowedDropdown);
+        setIsShowedOptions(!isShowedOptions);
         inputRef.current?.blur();
     };
     const handleResetOptions = () => {
-        setIsShowedDropdown(false);
+        setIsShowedOptions(false);
         setInputValue('');
         setSelectedOptions([]);
     };
@@ -75,16 +82,23 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
         if (!!selectedOptions?.length && !!inputValue) {
             onSelectOption(selectedOptions);
         }
-    }, [inputValue, onSelectOption, selectedOptions]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedOptions]);
     useEffect(() => {
         memoizedSelectedOptions();
-    }, [selectedOptions, inputValue, memoizedSelectedOptions]);
+    }, [selectedOptions, memoizedSelectedOptions]);
     useEffect(() => {
         if (hasDefaultValue) {
-            setSelectedOptions([hasDefaultValue]);
-            setInputValue(value);
+            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);
@@ -100,7 +114,7 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
             width: '100%',
             marginBottom: validMarginBottom,
             position: 'relative',
-            zIndex: isShowedDropdown ? 10 : 0,
+            zIndex: isShowedOptions ? 10 : 0,
         },
         wrapperInput: {
             position: 'relative',
@@ -127,7 +141,7 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
             letterSpacing: 0,
             borderBottomWidth: validBorderBottomWidth,
             color: black.main,
-            borderBottomColor: isShowedDropdown ? primary.main : grey[200],
+            borderBottomColor: isShowedOptions ? primary.main : grey[200],
         },
         arrowIcon: {
             position: 'absolute',
@@ -145,16 +159,20 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
             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}/>
+    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={!isMulti && isSearchable} caretHidden={!isSearchable} keyboardType={keyboardType} editable={!isDisabled} onFocus={handleOnFocus} onChangeText={handleChange} {...inputProps}/>
+				<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>
 
-			<Dropdown isShowedDropdown={isShowedDropdown} filteredOptions={filteredOptions} selectedOptions={selectedOptions} noOptionsMessage={noOptionsMessage} optionStyles={optionStyles} callbackOption={handleSelectedOption} customOptionComponent={customOptionComponent}/>
+			<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/{src/components → 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/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/{src/index.d.ts → index.d.ts}

@@ -17,5 +17,6 @@ import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
 import BaseButton from './components/BaseButton';
+import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
 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, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, LayoutWithBottomButtons, };

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

@@ -17,5 +17,6 @@ import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
 import BaseButton from './components/BaseButton';
+import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
 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, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, LayoutWithBottomButtons, };

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

@@ -1,13 +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 isWeb = Platform.OS === 'web';
 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);
+const scaledForDevice = (size, scaleCallback) => isWeb ? size : scaleCallback(size);
 export { isIOS, viewportWidth, viewportHeight, isSmallDevice, horizontalScale, verticalScale, moderateScale, scaledForDevice, };

package/dist/{src/theme → theme}/palette.d.ts

@@ -1,4 +1,4 @@
-import { Alert, Base, Black, Env, Error, GreyScale, Primary, Success, Warning, White } from '../ts/interfaces/colors';
+import { Alert, Base, Black, Env, Error, GreyScale, Primary, Success, Warning, White, Palette } from '../ts/interfaces/colors';
 declare const primary: Primary;
 declare const black: Black;
 declare const white: White;
@@ -9,16 +9,5 @@ declare const error: Error;
 declare const warning: Warning;
 declare const alert: Alert;
 declare const environment: Env;
-declare const palette: {
-    primary: Primary;
-    black: Black;
-    white: White;
-    grey: GreyScale;
-    base: Base;
-    success: Success;
-    error: Error;
-    warning: Warning;
-    alert: Alert;
-    environment: Env;
-};
+declare const palette: Palette;
 export { primary, black, white, grey, base, success, error, warning, alert, environment, palette };

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

@@ -1,4 +1,5 @@
 export interface GreyScale {
+    [key: string]: string;
     100: string;
     200: string;
     300: string;
@@ -8,14 +9,17 @@ export interface GreyScale {
     700: string;
 }
 export interface Env {
+    [key: string]: string;
     qa: string;
     beta: string;
 }
 export interface Base {
+    [key: string]: string;
     black: string;
     white: string;
 }
 export interface gamaColor {
+    [key: string]: string;
     main: string;
     dark: string;
 }
@@ -36,3 +40,16 @@ export interface White extends Primary {
 export interface Black extends gamaColor {
     semiTransparent: string;
 }
+export interface Palette {
+    [key: string]: any;
+    primary: Primary;
+    black: Black;
+    white: White;
+    grey: GreyScale;
+    base: Base;
+    success: Success;
+    error: Error;
+    warning: Warning;
+    alert: Alert;
+    environment: Env;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.3.0",
+	"version": "1.5.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",

package/dist/env.json

@@ -1 +0,0 @@
-{ "LOAD_STORYBOOK": true, "WEB_MODE": false }

package/dist/src/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/src/components/Select/Components/Icons/Chevron/index.d.ts

@@ -1,17 +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;
-        onPress: () => void;
-    };
-};
-export default Chevron;

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-import { primary } from '../../../../../theme/palette';
-import Svg, { Path } from 'react-native-svg';
-import { moderateScale, scaledForDevice } from '../../../../../scale';
-const Chevron = ({ style, color, size = 21, onPress, ...props }) => {
-    const validSize = scaledForDevice(size, moderateScale);
-    return (<Pressable onPress={onPress} style={style} {...props}>
-			<View>
-				<Svg width={validSize} height={validSize} 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,
-    onPress: () => { },
-};
-export default Chevron;

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

@@ -1,17 +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;
-        onPress: () => void;
-    };
-};
-export default Delete;

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-import { black } from '../../../../../theme/palette';
-import Svg, { Path } from 'react-native-svg';
-import { moderateScale, scaledForDevice } from '../../../../../scale';
-const Delete = ({ style, color, size = 21, onPress, ...props }) => {
-    const validSize = scaledForDevice(size, moderateScale);
-    return (<Pressable onPress={onPress} style={style} {...props}>
-			<View>
-				<Svg width={validSize} height={validSize} 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,
-    onPress: () => { },
-};
-export default Delete;

package/dist/src/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;
-};