@codeleap/mobile 1.4.2 → 1.5.0

package/dist/components/Sections.d.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { KeyboardAwareSectionListProps } from 'react-native-keyboard-aware-scroll-view';
-import { SectionList } from 'react-native';
-import { ViewProps } from './View';
-export declare type SectionListProps = KeyboardAwareSectionListProps<any> & ViewProps & {
-    onRefresh?: () => void;
-    refreshTimeout?: number;
-    changeData?: any;
-    separators?: boolean;
-};
-export declare const Sections: React.ForwardRefExoticComponent<Pick<SectionListProps, "children" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "data" | "variants" | "responsiveVariants" | "component" | "css" | "is" | "not" | "up" | "down" | "onHover" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "innerRef" | "viewIsInsideTabBar" | "resetScrollToCoords" | "enableResetScrollToCoords" | "enableAutomaticScroll" | "enableOnAndroid" | "extraHeight" | "extraScrollHeight" | "keyboardOpeningTime" | "onKeyboardWillShow" | "onKeyboardDidShow" | "onKeyboardWillHide" | "onKeyboardDidHide" | "onKeyboardWillChangeFrame" | "onKeyboardDidChangeFrame" | "contentContainerStyle" | "decelerationRate" | "horizontal" | "invertStickyHeaders" | "keyboardDismissMode" | "keyboardShouldPersistTaps" | "onScrollBeginDrag" | "onScrollEndDrag" | "onMomentumScrollEnd" | "onMomentumScrollBegin" | "pagingEnabled" | "showsHorizontalScrollIndicator" | "showsVerticalScrollIndicator" | "stickyHeaderHiddenOnScroll" | "refreshControl" | "snapToInterval" | "snapToOffsets" | "snapToStart" | "snapToEnd" | "stickyHeaderIndices" | "disableIntervalMomentum" | "disableScrollViewPanResponder" | "StickyHeaderComponent" | "alwaysBounceHorizontal" | "alwaysBounceVertical" | "automaticallyAdjustContentInsets" | "automaticallyAdjustsScrollIndicatorInsets" | "bounces" | "bouncesZoom" | "canCancelContentTouches" | "centerContent" | "contentInset" | "contentOffset" | "contentInsetAdjustmentBehavior" | "directionalLockEnabled" | "indicatorStyle" | "maintainVisibleContentPosition" | "maximumZoomScale" | "minimumZoomScale" | "onScrollAnimationEnd" | "pinchGestureEnabled" | "scrollEventThrottle" | "scrollIndicatorInsets" | "scrollToOverflowEnabled" | "scrollsToTop" | "snapToAlignment" | "onScrollToTop" | "zoomScale" | "endFillColor" | "scrollPerfTag" | "overScrollMode" | "nestedScrollEnabled" | "fadingEdgeLength" | "persistentScrollbar" | "onRefresh" | "refreshTimeout" | "changeData" | "refreshing" | "progressViewOffset" | "renderItem" | "ItemSeparatorComponent" | "ListEmptyComponent" | "ListFooterComponent" | "ListFooterComponentStyle" | "ListHeaderComponent" | "ListHeaderComponentStyle" | "extraData" | "getItemLayout" | "initialNumToRender" | "initialScrollIndex" | "keyExtractor" | "legacyImplementation" | "onEndReached" | "onEndReachedThreshold" | "onViewableItemsChanged" | "viewabilityConfig" | "debug" | "disableVirtualization" | "getItem" | "getItemCount" | "inverted" | "listKey" | "maxToRenderPerBatch" | "onScrollToIndexFailed" | "renderScrollComponent" | "updateCellsBatchingPeriod" | "viewabilityConfigCallbackPairs" | "windowSize" | "CellRendererComponent" | "separators" | "SectionSeparatorComponent" | "renderSectionHeader" | "renderSectionFooter" | "sections" | "stickySectionHeadersEnabled"> & React.RefAttributes<SectionList<any, import("react-native").DefaultSectionT>>>;
+import * as React from 'react';
+import { KeyboardAwareSectionListProps } from 'react-native-keyboard-aware-scroll-view';
+import { SectionList } from 'react-native';
+import { ViewProps } from './View';
+export declare type SectionListProps = KeyboardAwareSectionListProps<any> & ViewProps & {
+    onRefresh?: () => void;
+    refreshTimeout?: number;
+    changeData?: any;
+    separators?: boolean;
+};
+export declare const Sections: React.ForwardRefExoticComponent<Pick<SectionListProps, "children" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "data" | "variants" | "responsiveVariants" | "component" | "css" | "is" | "not" | "up" | "down" | "onHover" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "innerRef" | "viewIsInsideTabBar" | "resetScrollToCoords" | "enableResetScrollToCoords" | "enableAutomaticScroll" | "enableOnAndroid" | "extraHeight" | "extraScrollHeight" | "keyboardOpeningTime" | "onKeyboardWillShow" | "onKeyboardDidShow" | "onKeyboardWillHide" | "onKeyboardDidHide" | "onKeyboardWillChangeFrame" | "onKeyboardDidChangeFrame" | "contentContainerStyle" | "decelerationRate" | "horizontal" | "invertStickyHeaders" | "keyboardDismissMode" | "keyboardShouldPersistTaps" | "onScrollBeginDrag" | "onScrollEndDrag" | "onMomentumScrollEnd" | "onMomentumScrollBegin" | "pagingEnabled" | "showsHorizontalScrollIndicator" | "showsVerticalScrollIndicator" | "stickyHeaderHiddenOnScroll" | "refreshControl" | "snapToInterval" | "snapToOffsets" | "snapToStart" | "snapToEnd" | "stickyHeaderIndices" | "disableIntervalMomentum" | "disableScrollViewPanResponder" | "StickyHeaderComponent" | "alwaysBounceHorizontal" | "alwaysBounceVertical" | "automaticallyAdjustContentInsets" | "automaticallyAdjustsScrollIndicatorInsets" | "bounces" | "bouncesZoom" | "canCancelContentTouches" | "centerContent" | "contentInset" | "contentOffset" | "contentInsetAdjustmentBehavior" | "directionalLockEnabled" | "indicatorStyle" | "maintainVisibleContentPosition" | "maximumZoomScale" | "minimumZoomScale" | "onScrollAnimationEnd" | "pinchGestureEnabled" | "scrollEventThrottle" | "scrollIndicatorInsets" | "scrollToOverflowEnabled" | "scrollsToTop" | "snapToAlignment" | "onScrollToTop" | "zoomScale" | "endFillColor" | "scrollPerfTag" | "overScrollMode" | "nestedScrollEnabled" | "fadingEdgeLength" | "persistentScrollbar" | "onRefresh" | "refreshTimeout" | "changeData" | "refreshing" | "progressViewOffset" | "renderItem" | "ItemSeparatorComponent" | "ListEmptyComponent" | "ListFooterComponent" | "ListFooterComponentStyle" | "ListHeaderComponent" | "ListHeaderComponentStyle" | "extraData" | "getItemLayout" | "initialNumToRender" | "initialScrollIndex" | "keyExtractor" | "legacyImplementation" | "onEndReached" | "onEndReachedThreshold" | "onViewableItemsChanged" | "viewabilityConfig" | "debug" | "disableVirtualization" | "getItem" | "getItemCount" | "inverted" | "listKey" | "maxToRenderPerBatch" | "onScrollToIndexFailed" | "renderScrollComponent" | "updateCellsBatchingPeriod" | "viewabilityConfigCallbackPairs" | "windowSize" | "CellRendererComponent" | "separators" | "SectionSeparatorComponent" | "renderSectionHeader" | "renderSectionFooter" | "sections" | "stickySectionHeadersEnabled"> & React.RefAttributes<SectionList<any, import("react-native").DefaultSectionT>>>;

package/dist/components/Sections.js

@@ -1,77 +1,77 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sections = void 0;
-var React = __importStar(require("react"));
-var react_1 = require("react");
-var common_1 = require("@codeleap/common");
-var react_native_keyboard_aware_scroll_view_1 = require("react-native-keyboard-aware-scroll-view");
-var react_native_1 = require("react-native");
-var View_1 = require("./View");
-var KeyboardAwareSectionList = react_native_keyboard_aware_scroll_view_1.KeyboardAwareSectionList;
-exports.Sections = (0, react_1.forwardRef)(function (flatListProps, ref) {
-    var _a = flatListProps.variants, variants = _a === void 0 ? [] : _a, style = flatListProps.style, _b = flatListProps.refreshTimeout, refreshTimeout = _b === void 0 ? 3000 : _b, changeData = flatListProps.changeData, props = __rest(flatListProps, ["variants", "style", "refreshTimeout", "changeData"]);
-    var hasRefresh = !!props.onRefresh;
-    var _c = (0, react_1.useState)(false), refreshing = _c[0], setRefreshing = _c[1];
-    var timer = React.useRef(null);
-    var previousData = (0, common_1.usePrevious)(changeData);
-    var onRefresh = function () {
-        if (timer.current) {
-            clearTimeout(timer.current);
-        }
-        setRefreshing(true);
-        props.onRefresh();
-        timer.current = setTimeout(function () {
-            setRefreshing(false);
-        }, refreshTimeout);
-    };
-    (0, common_1.onUpdate)(function () {
-        if (refreshing && !(0, common_1.deepEqual)(previousData, changeData)) {
-            setRefreshing(false);
-            if (timer.current) {
-                clearTimeout(timer.current);
-            }
-        }
-    }, [refreshing, changeData]);
-    var Theme = (0, common_1.useCodeleapContext)().Theme;
-    var variantStyles = (0, common_1.useDefaultComponentStyle)('View', {
-        variants: variants,
-    });
-    var renderSeparator = function () {
-        return (<View_1.View variants={['separator']}></View_1.View>);
-    };
-    var separatorProp = props.separators;
-    var isEmpty = !props.data || !props.data.length;
-    var separator = !isEmpty && separatorProp == true && renderSeparator;
-    return (<KeyboardAwareSectionList style={[Theme.presets.full, style]} contentContainerStyle={[variantStyles.wrapper]} ref={ref} ItemSeparatorComponent={separator} {...props} refreshControl={hasRefresh && (<react_native_1.RefreshControl refreshing={refreshing} onRefresh={onRefresh}/>)}/>);
-});
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sections = void 0;
+var React = __importStar(require("react"));
+var react_1 = require("react");
+var common_1 = require("@codeleap/common");
+var react_native_keyboard_aware_scroll_view_1 = require("react-native-keyboard-aware-scroll-view");
+var react_native_1 = require("react-native");
+var View_1 = require("./View");
+var KeyboardAwareSectionList = react_native_keyboard_aware_scroll_view_1.KeyboardAwareSectionList;
+exports.Sections = (0, react_1.forwardRef)(function (flatListProps, ref) {
+    var _a = flatListProps.variants, variants = _a === void 0 ? [] : _a, style = flatListProps.style, _b = flatListProps.refreshTimeout, refreshTimeout = _b === void 0 ? 3000 : _b, changeData = flatListProps.changeData, props = __rest(flatListProps, ["variants", "style", "refreshTimeout", "changeData"]);
+    var hasRefresh = !!props.onRefresh;
+    var _c = (0, react_1.useState)(false), refreshing = _c[0], setRefreshing = _c[1];
+    var timer = React.useRef(null);
+    var previousData = (0, common_1.usePrevious)(changeData);
+    var onRefresh = function () {
+        if (timer.current) {
+            clearTimeout(timer.current);
+        }
+        setRefreshing(true);
+        props.onRefresh();
+        timer.current = setTimeout(function () {
+            setRefreshing(false);
+        }, refreshTimeout);
+    };
+    (0, common_1.onUpdate)(function () {
+        if (refreshing && !(0, common_1.deepEqual)(previousData, changeData)) {
+            setRefreshing(false);
+            if (timer.current) {
+                clearTimeout(timer.current);
+            }
+        }
+    }, [refreshing, changeData]);
+    var Theme = (0, common_1.useCodeleapContext)().Theme;
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('View', {
+        variants: variants,
+    });
+    var renderSeparator = function () {
+        return (<View_1.View variants={['separator']}></View_1.View>);
+    };
+    var separatorProp = props.separators;
+    var isEmpty = !props.data || !props.data.length;
+    var separator = !isEmpty && separatorProp == true && renderSeparator;
+    return (<KeyboardAwareSectionList style={[Theme.presets.full, style]} contentContainerStyle={[variantStyles.wrapper]} ref={ref} ItemSeparatorComponent={separator} {...props} refreshControl={hasRefresh && (<react_native_1.RefreshControl refreshing={refreshing} onRefresh={onRefresh}/>)}/>);
+});
 //# sourceMappingURL=Sections.js.map

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { CustomSelectProps } from './types';
-export declare const Select: <T extends string | number = string>(selectProps: CustomSelectProps<T>) => JSX.Element;
-export * from './styles';
-export * from './types';
+/// <reference types="react" />
+import { CustomSelectProps } from './types';
+export declare const Select: <T extends string | number = string>(selectProps: CustomSelectProps<T>) => JSX.Element;
+export * from './styles';
+export * from './types';

package/dist/components/Select/index.js

@@ -1,145 +1,145 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-var common_1 = require("@codeleap/common");
-var react_1 = __importStar(require("react"));
-var react_native_1 = require("react-native");
-var Button_1 = require("../Button");
-var Scroll_1 = require("../Scroll");
-var TextInput_1 = require("../TextInput");
-var Touchable_1 = require("../Touchable");
-var View_1 = require("../View");
-var Select = function (selectProps) {
-    var value = selectProps.value, onValueChange = selectProps.onValueChange, label = selectProps.label, _a = selectProps.styles, styles = _a === void 0 ? {} : _a, options = selectProps.options, style = selectProps.style, variants = selectProps.variants, renderItem = selectProps.renderItem, _b = selectProps.closeOnSelect, closeOnSelect = _b === void 0 ? true : _b, _c = selectProps.scroll, scroll = _c === void 0 ? false : _c, _d = selectProps.showClose, showClose = _d === void 0 ? true : _d, _e = selectProps.showLabelOnModal, showLabelOnModal = _e === void 0 ? true : _e, _f = selectProps.placeholder, placeholder = _f === void 0 ? 'Select' : _f, _g = selectProps.arrowIconName, arrowIconName = _g === void 0 ? 'selectArrow' : _g, footer = selectProps.footer, _h = selectProps.modalCloseIconName, modalCloseIconName = _h === void 0 ? 'close' : _h, header = selectProps.header, closeButtonProps = selectProps.closeButtonProps, modalLabel = selectProps.modalLabel, props = __rest(selectProps, ["value", "onValueChange", "label", "styles", "options", "style", "variants", "renderItem", "closeOnSelect", "scroll", "showClose", "showLabelOnModal", "placeholder", "arrowIconName", "footer", "modalCloseIconName", "header", "closeButtonProps", "modalLabel"]);
-    var _j = (0, common_1.useBooleanToggle)(false), isModalVisible = _j[0], setModalVisibility = _j[1];
-    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:MobileSelect', {
-        transform: react_native_1.StyleSheet.flatten,
-        rootElement: 'inputWrapper',
-        styles: styles,
-        variants: variants,
-    });
-    var inputStyles = (0, react_1.useMemo)(function () { return (0, common_1.getNestedStylesByKey)('input', variantStyles); }, [variantStyles]);
-    var closeButtonStyles = (0, react_1.useMemo)(function () { return (0, common_1.getNestedStylesByKey)('modalCloseButton', variantStyles); }, [variantStyles]);
-    var ListComponent = scroll ? Scroll_1.Scroll : View_1.View;
-    var close = function () { return setModalVisibility(); };
-    var select = function (value) {
-        onValueChange(value);
-        if (closeOnSelect) {
-            close();
-        }
-    };
-    var selectedLabel = (0, react_1.useMemo)(function () {
-        var _a;
-        var current = options.find(function (o) { return o.value === value; });
-        var display = (_a = current === null || current === void 0 ? void 0 : current.label) !== null && _a !== void 0 ? _a : placeholder;
-        return common_1.TypeGuards.isString(display) ? display : '';
-    }, [value, placeholder, options]);
-    return <>
-    <TextInput_1.TextInput caretHidden value={selectedLabel} rightIcon={{
-            name: arrowIconName,
-        }} editable={false} touchableWrapper innerWrapperProps={{
-            debugName: 'Select',
-            onPress: close,
-        }} label={label} debugName={'Select input'} styles={inputStyles} style={style} {...props}/>
-    <View_1.AnimatedView pointerEvents={'none'} transition='opacity' style={[
-            {
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                left: 0,
-                bottom: 0,
-            },
-            variantStyles.backdrop,
-            isModalVisible ? variantStyles['backdrop:visible'] : variantStyles['backdrop:hidden'],
-        ]}/>
-
-    <react_native_1.Modal animationType='slide' transparent={true} visible={isModalVisible} onRequestClose={function () {
-            setModalVisibility();
-        }} pointerEvents={isModalVisible ? 'auto' : 'none'}>
-      <Touchable_1.Touchable onPress={close} style={{
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            left: 0,
-            bottom: 0,
-        }} debugName={"Close modal"}/>
-      <View_1.View style={variantStyles.modalWrapper}>
-
-        <View_1.View style={variantStyles.modalBox}>
-          {(showClose || showLabelOnModal || header) && (<View_1.View style={variantStyles.modalHeader}>
-                {header ? header : <>
-                    {showLabelOnModal && <TextInput_1.InputLabel label={modalLabel || label} style={variantStyles.modalLabelText}/>}
-                    {showClose && <Button_1.Button icon={modalCloseIconName} onPress={close} styles={closeButtonStyles} debugName={'Close modal'} {...closeButtonProps}/>}
-                  </>}
-              </View_1.View>)}
-          <ListComponent style={variantStyles.modalList}>
-            {options.map(function (item, idx) {
-            var isSelected = value === item.value;
-            if (renderItem) {
-                return renderItem(__assign(__assign({}, item), { selected: isSelected, onPress: close, styles: variantStyles }));
-            }
-            return <Touchable_1.Touchable key={idx} style={[
-                    variantStyles.modalItem,
-                    isSelected && variantStyles['modalItem:selected'],
-                ]} onPress={function () { return select(item.value); }} debugName={"Select ".concat(item.value)}>
-                  <TextInput_1.InputLabel label={item.label} style={[variantStyles.modalItemText, isSelected && variantStyles['modalItemText:selected']]}/>
-                </Touchable_1.Touchable>;
-        })}
-          </ListComponent>
-
-          {footer && <View_1.View style={variantStyles.modalFooter}>
-              {footer}
-            </View_1.View>}
-        </View_1.View>
-      </View_1.View>
-    </react_native_1.Modal>
-  </>;
-};
-exports.Select = Select;
-__exportStar(require("./styles"), exports);
-__exportStar(require("./types"), exports);
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+var common_1 = require("@codeleap/common");
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var Button_1 = require("../Button");
+var Scroll_1 = require("../Scroll");
+var TextInput_1 = require("../TextInput");
+var Touchable_1 = require("../Touchable");
+var View_1 = require("../View");
+var Select = function (selectProps) {
+    var value = selectProps.value, onValueChange = selectProps.onValueChange, label = selectProps.label, _a = selectProps.styles, styles = _a === void 0 ? {} : _a, options = selectProps.options, style = selectProps.style, variants = selectProps.variants, renderItem = selectProps.renderItem, _b = selectProps.closeOnSelect, closeOnSelect = _b === void 0 ? true : _b, _c = selectProps.scroll, scroll = _c === void 0 ? false : _c, _d = selectProps.showClose, showClose = _d === void 0 ? true : _d, _e = selectProps.showLabelOnModal, showLabelOnModal = _e === void 0 ? true : _e, _f = selectProps.placeholder, placeholder = _f === void 0 ? 'Select' : _f, _g = selectProps.arrowIconName, arrowIconName = _g === void 0 ? 'selectArrow' : _g, footer = selectProps.footer, _h = selectProps.modalCloseIconName, modalCloseIconName = _h === void 0 ? 'close' : _h, header = selectProps.header, closeButtonProps = selectProps.closeButtonProps, modalLabel = selectProps.modalLabel, props = __rest(selectProps, ["value", "onValueChange", "label", "styles", "options", "style", "variants", "renderItem", "closeOnSelect", "scroll", "showClose", "showLabelOnModal", "placeholder", "arrowIconName", "footer", "modalCloseIconName", "header", "closeButtonProps", "modalLabel"]);
+    var _j = (0, common_1.useBooleanToggle)(false), isModalVisible = _j[0], setModalVisibility = _j[1];
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:MobileSelect', {
+        transform: react_native_1.StyleSheet.flatten,
+        rootElement: 'inputWrapper',
+        styles: styles,
+        variants: variants,
+    });
+    var inputStyles = (0, react_1.useMemo)(function () { return (0, common_1.getNestedStylesByKey)('input', variantStyles); }, [variantStyles]);
+    var closeButtonStyles = (0, react_1.useMemo)(function () { return (0, common_1.getNestedStylesByKey)('modalCloseButton', variantStyles); }, [variantStyles]);
+    var ListComponent = scroll ? Scroll_1.Scroll : View_1.View;
+    var close = function () { return setModalVisibility(); };
+    var select = function (value) {
+        onValueChange(value);
+        if (closeOnSelect) {
+            close();
+        }
+    };
+    var selectedLabel = (0, react_1.useMemo)(function () {
+        var _a;
+        var current = options.find(function (o) { return o.value === value; });
+        var display = (_a = current === null || current === void 0 ? void 0 : current.label) !== null && _a !== void 0 ? _a : placeholder;
+        return common_1.TypeGuards.isString(display) ? display : '';
+    }, [value, placeholder, options]);
+    return <>
+    <TextInput_1.TextInput caretHidden value={selectedLabel} rightIcon={{
+            name: arrowIconName,
+        }} editable={false} touchableWrapper innerWrapperProps={{
+            debugName: 'Select',
+            onPress: close,
+        }} label={label} debugName={'Select input'} styles={inputStyles} style={style} {...props}/>
+    <View_1.AnimatedView pointerEvents={'none'} transition='opacity' style={[
+            {
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                left: 0,
+                bottom: 0,
+            },
+            variantStyles.backdrop,
+            isModalVisible ? variantStyles['backdrop:visible'] : variantStyles['backdrop:hidden'],
+        ]}/>
+
+    <react_native_1.Modal animationType='slide' transparent={true} visible={isModalVisible} onRequestClose={function () {
+            setModalVisibility();
+        }} pointerEvents={isModalVisible ? 'auto' : 'none'}>
+      <Touchable_1.Touchable onPress={close} style={{
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            left: 0,
+            bottom: 0,
+        }} debugName={"Close modal"}/>
+      <View_1.View style={variantStyles.modalWrapper}>
+
+        <View_1.View style={variantStyles.modalBox}>
+          {(showClose || showLabelOnModal || header) && (<View_1.View style={variantStyles.modalHeader}>
+                {header ? header : <>
+                    {showLabelOnModal && <TextInput_1.InputLabel label={modalLabel || label} style={variantStyles.modalLabelText}/>}
+                    {showClose && <Button_1.Button icon={modalCloseIconName} onPress={close} styles={closeButtonStyles} debugName={'Close modal'} {...closeButtonProps}/>}
+                  </>}
+              </View_1.View>)}
+          <ListComponent style={variantStyles.modalList}>
+            {options.map(function (item, idx) {
+            var isSelected = value === item.value;
+            if (renderItem) {
+                return renderItem(__assign(__assign({}, item), { selected: isSelected, onPress: close, styles: variantStyles }));
+            }
+            return <Touchable_1.Touchable key={idx} style={[
+                    variantStyles.modalItem,
+                    isSelected && variantStyles['modalItem:selected'],
+                ]} onPress={function () { return select(item.value); }} debugName={"Select ".concat(item.value)}>
+                  <TextInput_1.InputLabel label={item.label} style={[variantStyles.modalItemText, isSelected && variantStyles['modalItemText:selected']]}/>
+                </Touchable_1.Touchable>;
+        })}
+          </ListComponent>
+
+          {footer && <View_1.View style={variantStyles.modalFooter}>
+              {footer}
+            </View_1.View>}
+        </View_1.View>
+      </View_1.View>
+    </react_native_1.Modal>
+  </>;
+};
+exports.Select = Select;
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/dist/components/Select/styles.d.ts

@@ -1,9 +1,9 @@
-import { ButtonParts, TextInputComposition } from '@codeleap/common';
-declare type ModalParts = 'Box' | 'Wrapper' | 'Header' | 'Footer' | 'List' | 'Item' | 'ItemText' | 'Item:selected' | 'ItemText:selected' | 'LabelText' | `CloseButton${Capitalize<ButtonParts>}`;
-declare type InputParts = `input${Capitalize<TextInputComposition>}`;
-export declare type MobileSelectParts = InputParts | `backdrop` | `backdrop:visible` | `backdrop:hidden` | `modal${ModalParts}`;
-export declare type MobileSelectComposition = MobileSelectParts;
-export declare const MobileSelectStyles: {
-    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<MobileSelectParts, any>>;
-};
-export {};
+import { ButtonParts, TextInputComposition } from '@codeleap/common';
+declare type ModalParts = 'Box' | 'Wrapper' | 'Header' | 'Footer' | 'List' | 'Item' | 'ItemText' | 'Item:selected' | 'ItemText:selected' | 'LabelText' | `CloseButton${Capitalize<ButtonParts>}`;
+declare type InputParts = `input${Capitalize<TextInputComposition>}`;
+export declare type MobileSelectParts = InputParts | `backdrop` | `backdrop:visible` | `backdrop:hidden` | `modal${ModalParts}`;
+export declare type MobileSelectComposition = MobileSelectParts;
+export declare const MobileSelectStyles: {
+    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<MobileSelectParts, any>>;
+};
+export {};