ncore-ui-kit 1.0.0-pre-alpha.0

package/lib/src/components/selectBox/index.js

@@ -0,0 +1,501 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, forwardRef, useEffect, useState, useRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+import {} from "./type";
+import stylesheet, { getSelectBoxType, useStyles } from "./stylesheet";
+import { NCoreUIKitLocalize, NCoreUIKitTheme, NCoreUIKitToast } from "../../core/hooks";
+import {} from "../../types";
+import { BadgeQuestionMarkIcon, BadgeSuccessIcon, BadgeDangerIcon, BadgeAlertIcon, BadgeInfoIcon, CleanIcon } from "../../assets/svg";
+import { uuid } from "../../utils";
+import SelectSheet from "../selectSheet";
+import Text from "../text";
+const SelectBoxTypeIcon = {
+    "question": BadgeQuestionMarkIcon,
+    "success": BadgeSuccessIcon,
+    "warning": BadgeAlertIcon,
+    "danger": BadgeDangerIcon,
+    "info": BadgeInfoIcon
+};
+function SelectBox({ renderLoadingIcon: LoadingIconComponentProp, rightIcon: RightIconComponentProp, hintTextIcon: HintTextIconProp, isShowSelectSheetTools = true, spreadBehaviour = "baseline", isShowHintTextIcon = false, customSelectSheetLocalize, isWorkWithRealtime = true, isMultipleSelect = false, icon: IconComponentProp, hintTextContainerStyle, removeSelectValidation, customSelectSheetTheme, isCleanEnabled = false, contentContainerStyle, subTitle = "Optional", initialSelectedItems, isSearchable = false, onFocus: onFocusProp, isRequired = false, isDisabled = false, onBlur: onBlurProp, moreLoadThreshold, hintTextIconStyle, data: initialData, selectSheetProps, type = "default", rightIconOnPress, renderOptionIcon, selectValidation, customLocalize, rightIconStyle, isShowSubTitle, cleanIconStyle, titleExtractor, maxChoice = -1, keyExtractor, contentStyle, customTheme, placeholder, iconOnPress, onMoreLoad, isOptional, renderItem, customKey, minChoice, iconStyle, onChange, hintText, onSearch, onCancel, style, title, onOk }, ref) {
+    const { inlineSpaces, typography, radiuses, borders, spaces, colors } = NCoreUIKitTheme.useContext(customTheme);
+    const { localize } = NCoreUIKitLocalize.useContext(customLocalize);
+    const bottomSheetRef = useRef(null);
+    const selectBoxKey = useRef(customKey ? customKey : uuid());
+    const currentType = getSelectBoxType({
+        type
+    });
+    const styleType = type === "default" ? "neutral" : type === "question" ? "neutral" : type === "danger" ? "error" : type;
+    const [data, setData] = useState([]);
+    const [searchedData, setSearchedData] = useState([]);
+    const [isActive, setIsActive] = useState(false);
+    const [searchText, setSearchText] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [isMoreLoading, setIsMoreLoading] = useState(true);
+    const [selectedItems, setSelectedItems] = useState(initialSelectedItems ?? []);
+    const [tempSelectedItems, setTempSelectedItems] = useState(initialSelectedItems ?? []);
+    const mainSelectedItems = isWorkWithRealtime ? selectedItems : tempSelectedItems;
+    const { contentContainer: contentContainerDynamicStyle, titleContainer: titleContainerDynamicStyle, hintTextIcon: hintTextIconDynamicStyle, contentText: contentTextDynamicStyle, cleanButton: cleanButtonDynamicStyle, rightIcon: rightIconDynamicStyle, container: containerDynamicStyle, hintText: hintTextDynamicStyle, required: requiredDynamicStyle, subTitle: subTitleDynamicStyle, overlay: overlayDynamicStyle, content: contentDynamicStyle, title: titleDynamicStyle, icon: iconDynamicStyle } = useStyles({
+        icon: IconComponentProp ? true : false,
+        spreadBehaviour,
+        inlineSpaces,
+        isSearchable,
+        currentType,
+        isDisabled,
+        isActive,
+        radiuses,
+        borders,
+        spaces,
+        colors,
+        title,
+        type
+    });
+    useImperativeHandle(ref, () => ({
+        setIsMoreLoading: (e) => setIsMoreLoading(e),
+        setIsLoading: (e) => setIsLoading(e),
+        updateSelections,
+        cleanSelections,
+        updateData,
+        selectAll,
+        cleanAll,
+        cancel,
+        focus,
+        blur,
+        ok
+    }), []);
+    useEffect(() => {
+        if (isActive) {
+            if (onFocus)
+                onFocus();
+        }
+        else {
+            if (!isWorkWithRealtime) {
+                setTempSelectedItems([]);
+            }
+            setSearchText("");
+            setSearchedData([]);
+            setIsMoreLoading(false);
+            if (onBlur)
+                onBlur();
+        }
+    }, [isActive]);
+    useEffect(() => {
+        if (isSearchable && searchText && searchText.length) {
+            if (onSearch) {
+                const _searchedData = prepareDatas(onSearch({
+                    selectedItems: mainSelectedItems,
+                    setIsMoreLoading,
+                    setIsLoading,
+                    searchText,
+                    data
+                }), mainSelectedItems);
+                setSearchedData(_searchedData);
+            }
+            else {
+                const _searchedData = data.filter(dI => {
+                    return dI.__title.toLocaleLowerCase().includes(searchText.toLocaleLowerCase());
+                });
+                setSearchedData(_searchedData);
+            }
+        }
+        else if (searchedData && searchedData.length) {
+            setSearchedData([]);
+        }
+    }, [
+        data,
+        searchText
+    ]);
+    useEffect(() => {
+        const initData = prepareDatas(initialData, initialSelectedItems);
+        setData(initData);
+    }, []);
+    useEffect(() => {
+        if (onChange) {
+            onChange(mainSelectedItems, data, setIsMoreLoading, setIsLoading);
+        }
+    }, [
+        tempSelectedItems,
+        selectedItems,
+        data
+    ]);
+    const titleProps = {
+        color: currentType.titleColor,
+        variant: "bodyLargeSize"
+    };
+    const iconProps = {
+        size: Number(typography.labelLargeSize.fontSize) + 6,
+        color: currentType.iconColor
+    };
+    if (isDisabled) {
+        iconProps.color = "disabled";
+    }
+    const blur = () => {
+        setIsActive(false);
+    };
+    const focus = () => {
+        if (!isWorkWithRealtime) {
+            setTempSelectedItems(selectedItems);
+        }
+        setIsActive(true);
+    };
+    const cancel = () => {
+        if (!isWorkWithRealtime) {
+            bottomSheetRef.current?.close(() => {
+                blur();
+            });
+            if (onCancel) {
+                onCancel(mainSelectedItems, data, setIsMoreLoading, setIsLoading);
+            }
+        }
+    };
+    const ok = () => {
+        if (!isWorkWithRealtime) {
+            setSelectedItems(tempSelectedItems);
+            bottomSheetRef.current?.close(() => {
+                blur();
+            });
+            if (onOk) {
+                onOk(mainSelectedItems, data, setIsMoreLoading, setIsLoading);
+            }
+        }
+    };
+    const cleanSelections = () => {
+        setSelectedItems([]);
+        if (!isWorkWithRealtime) {
+            setTempSelectedItems([]);
+        }
+    };
+    const updateData = (newData, newSelectedItems) => {
+        const _newData = newData.map((bIItem, bIIndex) => {
+            return {
+                ...bIItem,
+                __title: titleExtractor(bIItem, bIIndex),
+                __key: keyExtractor(bIItem, bIIndex)
+            };
+        });
+        setData(_newData);
+        const _newSelectedItems = JSON.parse(JSON.stringify(newSelectedItems ? newSelectedItems : mainSelectedItems)).map((sItem) => {
+            const originalDataIndex = _newData.findIndex(ssItem => ssItem.__key === sItem.__key);
+            return {
+                __title: _newData[originalDataIndex]?.__title,
+                __key: _newData[originalDataIndex]?.__key
+            };
+        });
+        if (isWorkWithRealtime) {
+            setSelectedItems(_newSelectedItems);
+        }
+        else {
+            setTempSelectedItems(_newSelectedItems);
+        }
+    };
+    const updateSelections = (newSelectedItems) => {
+        const _newSelectedItems = JSON.parse(JSON.stringify(newSelectedItems)).map((sItem) => {
+            const originalDataIndex = data.findIndex(ssItem => ssItem.__key === sItem.__key);
+            return {
+                ...sItem,
+                __title: data[originalDataIndex]?.__title,
+                __key: data[originalDataIndex]?.__key
+            };
+        });
+        if (isWorkWithRealtime) {
+            setSelectedItems(_newSelectedItems);
+        }
+        else {
+            setTempSelectedItems(_newSelectedItems);
+        }
+    };
+    const prepareDatas = (items, sItems) => {
+        const initData = [];
+        if (sItems && sItems.length) {
+            sItems.forEach((iS) => {
+                const dataIndex = items.findIndex((iD, iDI) => keyExtractor(iD, iDI) === iS.__key);
+                if (dataIndex === -1) {
+                    initData.unshift(iS);
+                }
+            });
+        }
+        const finalData = items.map((bIItem, bIIndex) => {
+            return {
+                ...bIItem,
+                __title: titleExtractor(bIItem, bIIndex),
+                __key: keyExtractor(bIItem, bIIndex)
+            };
+        });
+        return [
+            ...initData,
+            ...finalData
+        ];
+    };
+    const selectObject = (selectedItem) => {
+        const isAlreadySelected = mainSelectedItems.findIndex(sItem => sItem.__key === selectedItem.__key);
+        let _selectedItems = JSON.parse(JSON.stringify(mainSelectedItems));
+        if (isAlreadySelected !== -1) {
+            let isProcessPerm = false;
+            if (isMultipleSelect) {
+                if (minChoice) {
+                    if (_selectedItems.length > minChoice) {
+                        isProcessPerm = true;
+                    }
+                }
+                else {
+                    isProcessPerm = true;
+                }
+            }
+            else {
+                const _minChoice = minChoice === undefined ? 0 : minChoice;
+                if (_minChoice > 0) {
+                    NCoreUIKitToast.open({
+                        title: localize("minimum-a-item-selection-required")
+                    });
+                }
+                else {
+                    isProcessPerm = true;
+                }
+            }
+            if (isProcessPerm) {
+                if (removeSelectValidation) {
+                    if (removeSelectValidation(selectedItem)) {
+                        _selectedItems = _selectedItems.filter((sItem) => sItem.__key !== selectedItem.__key);
+                    }
+                }
+                else {
+                    _selectedItems = _selectedItems.filter((sItem) => sItem.__key !== selectedItem.__key);
+                }
+            }
+        }
+        else {
+            let isProcessPerm = false;
+            if (isMultipleSelect) {
+                if (_selectedItems.length < maxChoice || maxChoice === -1) {
+                    isProcessPerm = true;
+                }
+                else {
+                    NCoreUIKitToast.open({
+                        title: localize("maximum-selection-limit-has-been-reached")
+                    });
+                }
+            }
+            else {
+                _selectedItems = [];
+                isProcessPerm = true;
+            }
+            if (isProcessPerm) {
+                if (selectValidation) {
+                    if (selectValidation(selectedItem)) {
+                        _selectedItems.push({
+                            __title: selectedItem.__title,
+                            __key: selectedItem.__key
+                        });
+                    }
+                }
+                else {
+                    _selectedItems.push({
+                        __title: selectedItem.__title,
+                        __key: selectedItem.__key
+                    });
+                }
+            }
+        }
+        if (isWorkWithRealtime) {
+            setSelectedItems(_selectedItems);
+        }
+        else {
+            setTempSelectedItems(_selectedItems);
+        }
+    };
+    const cleanAll = () => {
+        if (minChoice) {
+            console.error("minChoice must be 0 or undefined for cleanAll function.");
+            return;
+        }
+        if (isWorkWithRealtime) {
+            setSelectedItems([]);
+        }
+        else {
+            setTempSelectedItems([]);
+        }
+    };
+    const selectAll = () => {
+        if (maxChoice !== -1) {
+            console.error("maxChoice must be -1 for selectAll function.");
+            return;
+        }
+        const _selectedItems = JSON.parse(JSON.stringify(mainSelectedItems));
+        if (searchText && searchText.length) {
+            searchedData.forEach(searchedItem => {
+                if (mainSelectedItems.findIndex(sI => sI.__key === searchedItem.__key) === -1) {
+                    _selectedItems.push({
+                        __title: searchedItem.__title,
+                        __key: searchedItem.__key
+                    });
+                }
+            });
+        }
+        else {
+            data.forEach(dataItem => {
+                if (mainSelectedItems.findIndex(sI => sI.__key === dataItem.__key) === -1) {
+                    _selectedItems.push({
+                        __title: dataItem.__title,
+                        __key: dataItem.__key
+                    });
+                }
+            });
+        }
+        if (isWorkWithRealtime) {
+            setSelectedItems(_selectedItems);
+        }
+        else {
+            setTempSelectedItems(_selectedItems);
+        }
+    };
+    const onFocus = () => {
+        if (onFocusProp)
+            onFocusProp();
+    };
+    const onBlur = () => {
+        if (onBlurProp)
+            onBlurProp();
+    };
+    const renderCleanButton = () => {
+        if (isDisabled) {
+            return null;
+        }
+        if (!isCleanEnabled || !selectedItems.length) {
+            return null;
+        }
+        return _jsx(TouchableOpacity, { style: [
+                cleanIconStyle,
+                stylesheet.cleanButton,
+                cleanButtonDynamicStyle
+            ], onPress: () => {
+                setSelectedItems([]);
+                setTempSelectedItems([]);
+            }, children: _jsx(CleanIcon, { color: "mid", size: 20 }) });
+    };
+    const renderIcon = () => {
+        if (!IconComponentProp) {
+            return null;
+        }
+        return _jsx(TouchableOpacity, { onPress: iconOnPress, style: [
+                iconStyle,
+                stylesheet.icon,
+                iconDynamicStyle
+            ], children: _jsx(IconComponentProp, { color: iconProps.color, size: iconProps.size }) });
+    };
+    const renderRightIcon = () => {
+        if (!RightIconComponentProp) {
+            return null;
+        }
+        if (isCleanEnabled && selectedItems.length > 0) {
+            return null;
+        }
+        return _jsx(TouchableOpacity, { onPress: rightIconOnPress, style: [
+                rightIconStyle,
+                stylesheet.rightIcon,
+                rightIconDynamicStyle
+            ], children: _jsx(RightIconComponentProp, { color: iconProps.color, size: iconProps.size }) });
+    };
+    const renderHintIcon = () => {
+        if (!isShowHintTextIcon) {
+            return null;
+        }
+        if (HintTextIconProp) {
+            return _jsx(HintTextIconProp, { color: isDisabled ? "disabled" : currentType.hintTextIconColor, size: 20, style: [
+                    hintTextIconStyle,
+                    stylesheet.hintTextIcon,
+                    hintTextIconDynamicStyle
+                ] });
+        }
+        const CurrentHintIcon = SelectBoxTypeIcon[type === "default" ? "question" : type];
+        return _jsx(CurrentHintIcon, { customColor: isDisabled ? colors.system.state.content.disabled[styleType] : undefined, color: currentType.hintTextIconColor, size: 20, style: [
+                hintTextIconStyle,
+                stylesheet.hintTextIcon,
+                hintTextIconDynamicStyle
+            ] });
+    };
+    const renderHintText = () => {
+        if (!hintText) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                hintTextContainerStyle,
+                stylesheet.hintText,
+                hintTextDynamicStyle
+            ], children: [renderHintIcon(), _jsx(Text, { customColor: isDisabled ? colors.system.state.content.disabled[styleType] : undefined, color: currentType.hintTextColor, variant: "labelSmallSize", children: hintText })] });
+    };
+    const renderRequired = () => {
+        if (!isRequired) {
+            return null;
+        }
+        return _jsx(Text, { color: "danger", style: [
+                stylesheet.required,
+                requiredDynamicStyle
+            ], children: "*" });
+    };
+    const renderSubtitle = () => {
+        if (!isShowSubTitle && !isOptional) {
+            return null;
+        }
+        return _jsxs(Text, { variant: "labelLargeSize", color: titleProps.color, ellipsizeMode: "tail", numberOfLines: 1, style: [
+                stylesheet.subTitle,
+                subTitleDynamicStyle
+            ], children: ["( ", isOptional ? localize("is-optional") : subTitle, " )"] });
+    };
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsxs(TouchableOpacity, { style: [
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ], onPress: () => {
+                if (!isDisabled) {
+                    focus();
+                }
+            }, children: [renderRequired(), _jsx(Text, { ...titleProps, variant: titleProps.variant, color: titleProps.color, ellipsizeMode: "tail", numberOfLines: 1, style: [
+                        stylesheet.title,
+                        titleDynamicStyle
+                    ], children: title }), renderSubtitle()] });
+    };
+    const renderValue = () => {
+        if (!selectedItems.length) {
+            return _jsx(Text, { variant: "labelLargeSize", ellipsizeMode: "tail", numberOfLines: 1, style: [
+                    stylesheet.contentText,
+                    contentTextDynamicStyle
+                ], children: placeholder ? placeholder : localize("select-an-option") });
+        }
+        return _jsx(Text, { variant: "labelLargeSize", ellipsizeMode: "tail", numberOfLines: 1, style: [
+                stylesheet.contentText,
+                contentTextDynamicStyle
+            ], children: selectedItems.length > 1 ? localize("selected-options-with-count", [
+                selectedItems.length
+            ]) : selectedItems[0]?.__title });
+    };
+    const renderContent = () => {
+        return _jsx(View, { style: [
+                contentStyle,
+                stylesheet.content,
+                contentDynamicStyle
+            ], children: renderValue() });
+    };
+    const renderOverlay = () => {
+        return _jsx(View, { style: [
+                stylesheet.overlay,
+                overlayDynamicStyle
+            ] });
+    };
+    return _jsxs(View, { style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: [renderTitle(), _jsxs(TouchableOpacity, { disabled: isDisabled, style: [
+                    contentContainerStyle,
+                    stylesheet.contentContainer,
+                    contentContainerDynamicStyle
+                ], onPress: () => {
+                    if (!isDisabled) {
+                        focus();
+                    }
+                }, children: [renderOverlay(), renderIcon(), renderContent(), renderCleanButton(), renderRightIcon()] }), renderHintText(), _jsx(SelectSheet, { LoadingIconComponentProp: LoadingIconComponentProp, customLocalize: customSelectSheetLocalize, isWorkWithRealtime: isWorkWithRealtime, mainSelectedItems: mainSelectedItems, moreLoadThreshold: moreLoadThreshold, isShowTools: isShowSelectSheetTools, customTheme: customSelectSheetTheme, isMultipleSelect: isMultipleSelect, renderOptionIcon: renderOptionIcon, setIsMoreLoading: setIsMoreLoading, bottomSheetProps: selectSheetProps, selectBoxKey: selectBoxKey.current, bottomSheetRef: bottomSheetRef, setSearchText: setSearchText, isMoreLoading: isMoreLoading, searchedData: searchedData, isSearchable: isSearchable, keyExtractor: keyExtractor, selectObject: selectObject, setIsLoading: setIsLoading, setIsActive: setIsActive, searchText: searchText, renderItem: renderItem, onMoreLoad: onMoreLoad, maxChoice: maxChoice, minChoice: minChoice, isLoading: isLoading, selectAll: selectAll, cleanAll: cleanAll, isActive: isActive, cancel: cancel, title: title, data: data, ok: ok })] });
+}
+;
+export default forwardRef(SelectBox);

package/lib/src/components/selectBox/stylesheet.js

@@ -0,0 +1,201 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const TEXT_INPUT_TYPE_STYLES = {
+    default: {
+        focusBorderColor: "emphasized",
+        borderColor: "emphasized",
+        hintTextIconColor: "mid",
+        placeholderColor: "low",
+        containerColor: "mid",
+        hintTextColor: "mid",
+        titleColor: "high",
+        inputColor: "mid",
+        iconColor: "mid"
+    },
+    danger: {
+        placeholderColor: "dangerLow",
+        hintTextIconColor: "danger",
+        focusBorderColor: "danger",
+        containerColor: "danger",
+        hintTextColor: "danger",
+        borderColor: "danger",
+        titleColor: "danger",
+        inputColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        placeholderColor: "successLow",
+        hintTextIconColor: "success",
+        focusBorderColor: "success",
+        containerColor: "success",
+        hintTextColor: "success",
+        borderColor: "success",
+        titleColor: "success",
+        inputColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        placeholderColor: "warningLow",
+        hintTextIconColor: "warning",
+        focusBorderColor: "warning",
+        containerColor: "warning",
+        hintTextColor: "warning",
+        borderColor: "warning",
+        titleColor: "warning",
+        inputColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        placeholderColor: "infoLow",
+        hintTextIconColor: "info",
+        focusBorderColor: "info",
+        containerColor: "info",
+        hintTextColor: "info",
+        borderColor: "info",
+        titleColor: "info",
+        inputColor: "info",
+        iconColor: "info"
+    },
+    question: {
+        focusBorderColor: "emphasized",
+        borderColor: "emphasized",
+        hintTextIconColor: "mid",
+        placeholderColor: "low",
+        containerColor: "mid",
+        hintTextColor: "mid",
+        titleColor: "mid",
+        inputColor: "mid",
+        iconColor: "mid"
+    }
+};
+export const getSelectBoxType = ({ type }) => {
+    const currentType = TEXT_INPUT_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "column",
+        boxSizing: "border-box"
+    },
+    contentContainer: {
+        boxSizing: "border-box",
+        flexDirection: "row",
+        borderStyle: "solid",
+        alignItems: "center",
+        position: "relative",
+        minWidth: 250
+    },
+    content: {
+        flexShrink: 1,
+        width: "100%",
+        flex: 1
+    },
+    contentText: {
+        minHeight: 20
+    },
+    cleanButton: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        zIndex: 99
+    },
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    title: {},
+    icon: {
+        justifyContent: "center",
+        alignContent: "center",
+        alignItems: "center",
+        zIndex: 99
+    },
+    required: {},
+    hintTextIcon: {},
+    hintText: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    subTitle: {},
+    overlay: {
+        position: "absolute",
+        display: "none",
+        zIndex: 98,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    rightIcon: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        zIndex: 99
+    }
+});
+export const useStyles = ({ spreadBehaviour, inlineSpaces, currentType, isDisabled, radiuses, isActive, borders, colors, spaces, type }) => {
+    const styleType = type === "danger" ? "error" : type === "question" ? "neutral" : type;
+    const styles = {
+        container: {},
+        contentContainer: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            borderColor: colors.content.container[currentType.containerColor],
+            paddingBottom: spaces.spacingMd,
+            paddingRight: spaces.spacingMd,
+            borderRadius: radiuses.actions,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingMd,
+            borderWidth: borders.line
+        },
+        content: {},
+        contentText: {},
+        cleanButton: {
+            marginLeft: spaces.spacingSm
+        },
+        titleContainer: {
+            marginBottom: spaces.spacingSm
+        },
+        title: {},
+        icon: {
+            marginRight: spaces.spacingSm
+        },
+        required: {
+            marginRight: inlineSpaces.required
+        },
+        hintTextIcon: {
+            marginRight: spaces.spacingXs
+        },
+        hintText: {
+            marginTop: spaces.spacingSm
+        },
+        subTitle: {
+            marginLeft: inlineSpaces.subTitle
+        },
+        overlay: {
+            borderRadius: radiuses.actions - 1
+        },
+        rightIcon: {
+            marginLeft: spaces.spacingSm
+        }
+    };
+    if (isDisabled) {
+        const disableStyleType = styleType === "default" ? "neutral" : styleType;
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[disableStyleType];
+        styles.container.borderColor = colors.system.state.overlay.disabled[disableStyleType];
+    }
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    }
+    if (spreadBehaviour === "stretch") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.justifyContent = "center";
+        styles.container.flexShrink = 1;
+        styles.container.width = "100%";
+    }
+    if (isActive) {
+        styles.contentContainer.borderColor = colors.content.border.emphasized;
+    }
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/selectBox/type.js

@@ -0,0 +1,3 @@
+import {} from "react-native";
+import {} from "../../types";
+;