@draftbit/core 47.0.0-alpha.1 → 47.0.0-ba694d.2

package/src/components/Elevation.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Animated, StyleSheet, View, } from "react-native";
+import shadow from "../styles/shadow";
+import { withTheme } from "../theming";
+/* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
+const Elevation = ({ style, theme, children, ...rest }) => {
+    const { elevation = 4, borderRadius: radius } = StyleSheet.flatten(style) || {};
+    const { colors } = theme;
+    const borderRadius = radius;
+    return (React.createElement(Animated.View, { ...rest, style: [
+            {
+                borderRadius,
+                backgroundColor: colors.surface,
+            },
+            elevation ? shadow(elevation) : null,
+            style,
+        ] },
+        React.createElement(View, { style: { overflow: "hidden", borderRadius } }, children)));
+};
+export default withTheme(Elevation);

package/src/components/FormRow.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Text, StyleSheet } from "react-native";
+import { extractStyles } from "../utilities";
+import Touchable from "./Touchable";
+export default function FormRow({ disabled, direction, children, label, style, onPress, ...rest }) {
+    const { textStyles, viewStyles } = extractStyles(style);
+    return (React.createElement(Touchable, { disabled: disabled, onPress: onPress, style: [styles.row, { flexDirection: direction }, viewStyles], ...rest },
+        React.createElement(Text, { style: textStyles }, label),
+        children));
+}
+const styles = StyleSheet.create({
+    row: {
+        marginLeft: 8,
+        marginRight: 8,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+});

package/src/components/IconButton.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { View, StyleSheet, ActivityIndicator, Pressable, Platform, } from "react-native";
+import { withTheme } from "../theming";
+const IconButton = ({ Icon, icon, color: customColor, size = 32, disabled = false, loading = false, onPress, theme, style, ...props }) => {
+    const iconColor = customColor || theme.colors.primary;
+    return (React.createElement(Pressable, { onPress: onPress, disabled: disabled || loading, style: ({ pressed }) => {
+            return [
+                styles.container,
+                {
+                    opacity: pressed || disabled ? 0.75 : 1,
+                    width: size,
+                    height: size,
+                    alignItems: "center",
+                    justifyContent: "center",
+                },
+                style,
+            ];
+        }, ...props },
+        React.createElement(View, null,
+            icon && !loading ? (React.createElement(Icon, { name: icon, size: size - 2, color: iconColor })) : null,
+            loading ? React.createElement(ActivityIndicator, { size: "small", color: iconColor }) : null)));
+};
+const styles = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        justifyContent: "center",
+        ...Platform.select({
+            web: {
+                cursor: "pointer",
+                userSelect: "none",
+            },
+        }),
+    },
+});
+export default withTheme(IconButton);

package/src/components/Layout.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { View } from "react-native";
+export function Center({ width = 240, height = 200, children, bgColor, style, ...rest }) {
+    return (React.createElement(View, { style: [
+            {
+                justifyContent: "center",
+                alignItems: "center",
+                width,
+                height,
+                backgroundColor: bgColor,
+            },
+            style,
+        ], ...rest }, children));
+}
+export function Circle({ size = 50, bgColor, children, style, ...rest }) {
+    const borderRadius = 1000;
+    return (React.createElement(Center, { width: size, height: size, bgColor: bgColor, style: [
+            style,
+            { backgroundColor: bgColor, borderRadius, overflow: "hidden" },
+        ], ...rest }, children));
+}
+export function Square({ size = 50, bgColor, children, style, ...rest }) {
+    return (React.createElement(Center, { style: style, width: size, height: size, bgColor: bgColor, ...rest }, children));
+}
+export function Row({ justifyContent, alignItems, children, style, ...rest }) {
+    return (React.createElement(View, { style: [
+            style,
+            {
+                alignItems,
+                flexDirection: "row",
+                justifyContent: justifyContent,
+            },
+        ], ...rest }, children));
+}
+export function Spacer({ top = 8, right = 8, bottom = 8, left = 8, children, style, ...rest }) {
+    return (React.createElement(View, { style: [
+            style,
+            {
+                paddingRight: right,
+                paddingTop: top,
+                paddingLeft: left,
+                paddingBottom: bottom,
+            },
+        ], ...rest }, children));
+}
+export function Stack({ children, justifyContent = "flex-start", alignItems = "flex-start", style, ...rest }) {
+    return (
+    // style must go first since we don't want justifyContent, alignItems overridden
+    React.createElement(View, { style: [style, { justifyContent, alignItems }], ...rest }, children));
+}

package/src/components/NumberInput.js

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from "react";
+import { TextInput } from "react-native";
+import { isString, isNumber, isNaN } from "lodash";
+const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
+    const [currentStringNumberValue, setCurrentStringNumberValue] = useState("0");
+    const formatValueToStringNumber = (valueToFormat) => {
+        if (valueToFormat != null) {
+            if (isString(valueToFormat) && valueToFormat !== "") {
+                if (/^0[1-9]$/.test(valueToFormat)) {
+                    return valueToFormat.slice(1);
+                }
+                else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
+                    return valueToFormat;
+                }
+                else {
+                    return currentStringNumberValue;
+                }
+            }
+            else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
+                return valueToFormat.toString();
+            }
+        }
+        return "0";
+    };
+    // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
+    useEffect(() => {
+        const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
+        if (currentStringNumberValue !== defaultStringNumberValue) {
+            setCurrentStringNumberValue(defaultStringNumberValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const handleChangeText = (newValue) => {
+        const newStringNumberValue = formatValueToStringNumber(newValue);
+        const number = parseFloat(newStringNumberValue);
+        setCurrentStringNumberValue(newStringNumberValue);
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(number);
+    };
+    // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
+    useEffect(() => {
+        const nextStringNumberValue = formatValueToStringNumber(value);
+        if (currentStringNumberValue !== nextStringNumberValue) {
+            handleChangeText(nextStringNumberValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    return (React.createElement(TextInput, { keyboardType: "numeric", value: currentStringNumberValue, onChangeText: handleChangeText, ...props }));
+};
+export default NumberInput;

package/src/components/Picker/Picker.js

@@ -0,0 +1,267 @@
+import * as React from "react";
+import { View, StyleSheet, Text, Platform, Dimensions, } from "react-native";
+import { omit, pickBy, identity, isObject } from "lodash";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import { withTheme } from "../../theming";
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+import Touchable from "../Touchable";
+import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames, } from "../../utilities";
+function normalizeOptions(options) {
+    if (options.length === 0) {
+        return [];
+    }
+    if (typeof options[0] === ("string" || "number")) {
+        return options.map((option) => ({
+            label: String(option),
+            value: String(option),
+        }));
+    }
+    if (isObject(options[0]) &&
+        options[0].value !== null &&
+        options[0].label !== null) {
+        return options.map((option) => {
+            return {
+                label: String(option.label),
+                value: String(option.value),
+            };
+        });
+    }
+    throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
+}
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+const isIos = Platform.OS === "ios";
+const unstyledColor = "rgba(165, 173, 183, 1)";
+const disabledColor = "rgb(240, 240, 240)";
+const errorColor = "rgba(255, 69, 100, 1)";
+const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, theme, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", }) => {
+    var _a, _b;
+    const androidPickerRef = React.useRef(undefined);
+    const [internalValue, setInternalValue] = React.useState(value || defaultValue);
+    const [pickerVisible, setPickerVisible] = React.useState(false);
+    const togglePickerVisible = () => {
+        setPickerVisible(!pickerVisible);
+    };
+    React.useEffect(() => {
+        if (value != null) {
+            setInternalValue(value);
+        }
+    }, [value]);
+    React.useEffect(() => {
+        if (defaultValue != null) {
+            setInternalValue(defaultValue);
+        }
+    }, [defaultValue]);
+    React.useEffect(() => {
+        var _a;
+        if (pickerVisible && androidPickerRef.current) {
+            (_a = androidPickerRef === null || androidPickerRef === void 0 ? void 0 : androidPickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [pickerVisible, androidPickerRef]);
+    const normalizedOptions = normalizeOptions(options);
+    const pickerOptions = placeholder
+        ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
+        : normalizedOptions;
+    const { colors } = theme;
+    const { viewStyles, textStyles } = extractStyles(style);
+    const additionalBorderStyles = ["backgroundColor"];
+    const additionalMarginStyles = [
+        "bottom",
+        "height",
+        "left",
+        "maxHeight",
+        "maxWidth",
+        "minHeight",
+        "minWidth",
+        "overflow",
+        "position",
+        "right",
+        "top",
+        "width",
+        "zIndex",
+    ];
+    const { borderStyles: extractedBorderStyles, marginStyles: extractedMarginStyles, } = extractBorderAndMarginStyles(viewStyles, additionalBorderStyles, additionalMarginStyles);
+    const borderStyles = {
+        ...{
+            ...(type === "solid"
+                ? {
+                    borderTopLeftRadius: 5,
+                    borderTopRightRadius: 5,
+                    borderBottomRightRadius: 5,
+                    borderBottomLeftRadius: 5,
+                    borderTopWidth: 1,
+                    borderRightWidth: 1,
+                    borderLeftWidth: 1,
+                }
+                : {}),
+            borderBottomWidth: 1,
+            borderColor: unstyledColor,
+            borderStyle: "solid",
+        },
+        ...extractedBorderStyles,
+        ...(error ? { borderColor: errorColor } : {}),
+        ...(disabled
+            ? { borderColor: "transparent", backgroundColor: disabledColor }
+            : {}),
+    };
+    const marginStyles = {
+        height: 60,
+        ...extractedMarginStyles,
+    };
+    const stylesWithoutBordersAndMargins = omit(viewStyles, [
+        ...borderStyleNames,
+        ...marginStyleNames,
+        ...additionalBorderStyles,
+        ...additionalMarginStyles,
+    ]);
+    const selectedLabel = internalValue &&
+        ((_b = (_a = pickerOptions.find((option) => option.value === internalValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : internalValue);
+    const labelText = label ? (React.createElement(Text, { style: {
+            textAlign: textStyles.textAlign,
+            color: unstyledColor,
+            fontSize: 12,
+            paddingBottom: 4,
+        } }, label)) : null;
+    const leftIconOutset = leftIconMode === "outset";
+    const leftIcon = leftIconName ? (React.createElement(Icon, { name: leftIconName, color: disabled ? unstyledColor : iconColor, size: iconSize, style: {
+            marginRight: 4,
+            marginLeft: 4,
+        } })) : null;
+    const rightIcon = rightIconName ? (React.createElement(Icon, { name: rightIconName, color: disabled ? unstyledColor : iconColor, size: iconSize, style: {
+            marginRight: -10,
+            marginLeft: 8,
+        } })) : null;
+    const textAlign = textStyles === null || textStyles === void 0 ? void 0 : textStyles.textAlign;
+    const calculateLeftPadding = () => {
+        if (leftIconOutset) {
+            if (textAlign === "center") {
+                return iconSize - Math.abs(8 - iconSize);
+            }
+            return iconSize + 8;
+        }
+        return 0;
+    };
+    const assistiveTextLabel = assistiveText ? (React.createElement(Text, { style: {
+            textAlign,
+            width: "100%",
+            paddingLeft: calculateLeftPadding(),
+            color: unstyledColor,
+            fontSize: 12,
+            paddingTop: 4,
+        } }, assistiveText)) : null;
+    const primaryTextStyle = {
+        color: unstyledColor,
+        fontSize: 14,
+        ...pickBy(textStyles, identity),
+        ...(placeholder === internalValue ? { color: placeholderTextColor } : {}),
+        ...(disabled ? { color: unstyledColor } : {}),
+    };
+    const handleValueChange = (newValue, itemIndex) => {
+        if (!placeholder || itemIndex > 0) {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue, itemIndex);
+        }
+        setInternalValue(newValue);
+    };
+    return (
+    /* marginsContainer */
+    React.createElement(View, { style: [styles.marginsContainer, marginStyles] },
+        React.createElement(Touchable, { disabled: disabled, onPress: togglePickerVisible, style: styles.touchableContainer },
+            React.createElement(View, { pointerEvents: "none", style: [
+                    styles.outsetContainer,
+                    stylesWithoutBordersAndMargins,
+                    !leftIconOutset ? borderStyles : {},
+                ] },
+                leftIcon,
+                React.createElement(View, { style: [
+                        styles.insetContainer,
+                        leftIconOutset ? borderStyles : {},
+                    ] },
+                    React.createElement(View, { style: styles.primaryTextContainer },
+                        labelText,
+                        React.createElement(Text, { style: primaryTextStyle }, String(selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder))),
+                    rightIcon)),
+            assistiveTextLabel),
+        isIos && pickerVisible ? (React.createElement(Portal, null,
+            React.createElement(View, { style: [
+                    styles.iosPicker,
+                    {
+                        backgroundColor: colors.divider,
+                    },
+                ] },
+                React.createElement(SafeAreaView, { style: styles.iosSafeArea },
+                    React.createElement(Button, { Icon: Icon, type: "text", onPress: togglePickerVisible, style: styles.iosButton }, "Close"),
+                    React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
+        !isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
+};
+const styles = StyleSheet.create({
+    marginsContainer: {
+        alignSelf: "stretch",
+        alignItems: "center",
+        width: "100%",
+        maxWidth: deviceWidth,
+    },
+    touchableContainer: {
+        flex: 1,
+        height: "100%",
+        width: "100%",
+        alignSelf: "stretch",
+        alignItems: "center",
+    },
+    outsetContainer: {
+        flex: 1,
+        height: "100%",
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    insetContainer: {
+        flex: 1,
+        height: "100%",
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingLeft: 12,
+        paddingRight: 12,
+    },
+    primaryTextContainer: {
+        flex: 1,
+    },
+    iosPicker: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        flexDirection: "row",
+        justifyContent: "center",
+        width: "100%",
+        maxWidth: deviceWidth,
+        maxHeight: deviceHeight,
+    },
+    iosSafeArea: {
+        backgroundColor: "white",
+        flexDirection: "column",
+        width: "100%",
+        maxWidth: deviceWidth,
+    },
+    iosButton: {
+        alignSelf: "flex-end",
+    },
+    iosNativePicker: {
+        backgroundColor: "white",
+    },
+    nonIosPicker: {
+        opacity: 0,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: "100%",
+        maxWidth: deviceWidth,
+        maxHeight: deviceHeight,
+    },
+});
+export default withTheme(Picker);

package/src/components/Picker/PickerComponent.android.js

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import omit from "lodash.omit";
+import { withTheme } from "../../theming";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import { extractStyles } from "../../utilities";
+import TextField from "../TextField";
+import Touchable from "../Touchable";
+const Picker = ({ style, options, placeholder, selectedValue, disabled = false, onValueChange: onValueChangeOverride = () => { }, ...props }) => {
+    var _a, _b;
+    const { viewStyles: { borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars
+    backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars
+    padding, // eslint-disable-line @typescript-eslint/no-unused-vars
+    paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars
+    paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars
+    paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars
+    paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars
+    ...viewStyles }, } = extractStyles(style);
+    const textField = React.useRef(undefined);
+    const onValueChange = (itemValue, itemIndex) => {
+        toggleFocus();
+        onValueChangeOverride(itemValue, itemIndex);
+    };
+    const toggleFocus = () => {
+        if (!disabled) {
+            // @ts-ignore
+            textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
+        }
+    };
+    const stylesWithoutMargin = style &&
+        omit(StyleSheet.flatten(style), [
+            "margin",
+            "marginTop",
+            "marginRight",
+            "marginBottom",
+            "marginLeft",
+        ]);
+    const selectedLabel = selectedValue &&
+        ((_b = (_a = options.find((o) => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
+    return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
+        React.createElement(View, null,
+            React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: onValueChange, style: {
+                    opacity: 0,
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    width: "100%",
+                } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
+            React.createElement(View, { pointerEvents: "none" },
+                React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder, 
+                    // @ts-ignore
+                    ref: textField, disabled: disabled, 
+                    // @ts-expect-error
+                    style: stylesWithoutMargin })))));
+};
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: "stretch",
+    },
+});
+export default withTheme(Picker);

package/src/components/Picker/PickerComponent.ios.js

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import omit from "lodash.omit";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import { withTheme } from "../../theming";
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+import TextField from "../TextField";
+import Touchable from "../Touchable";
+import { extractStyles } from "../../utilities";
+const Picker = ({ Icon, style, options, placeholder, selectedValue, disabled = false, onValueChange = () => { }, theme: { colors }, ...props }) => {
+    var _a, _b;
+    const { viewStyles: { borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars
+    backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars
+    padding, // eslint-disable-line @typescript-eslint/no-unused-vars
+    paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars
+    paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars
+    paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars
+    paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars
+    ...viewStyles }, } = extractStyles(style);
+    const textField = React.useRef(undefined);
+    const [pickerVisible, setIsPickerVisible] = React.useState(false);
+    const toggleVisibility = () => {
+        setIsPickerVisible(!pickerVisible);
+        // @ts-ignore
+        textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
+    };
+    const stylesWithoutMargin = style &&
+        omit(StyleSheet.flatten(style), [
+            "margin",
+            "marginTop",
+            "marginRight",
+            "marginBottom",
+            "marginLeft",
+        ]);
+    const selectedLabel = selectedValue &&
+        ((_b = (_a = options.find((o) => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
+    return (React.createElement(View, { style: [styles.container, viewStyles] },
+        React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
+            React.createElement(TextField, { ...props, value: String(selectedLabel), placeholder: placeholder, 
+                // @ts-ignore
+                ref: textField, disabled: disabled, pointerEvents: "none", 
+                // @ts-expect-error
+                style: stylesWithoutMargin, Icon: Icon })),
+        pickerVisible && (React.createElement(Portal, null,
+            React.createElement(View, { style: [styles.picker, { backgroundColor: colors.divider }] },
+                React.createElement(SafeAreaView, { style: styles.pickerContainer },
+                    React.createElement(Button, { Icon: Icon, type: "text", onPress: toggleVisibility, style: styles.closeButton }, "Close"),
+                    React.createElement(NativePicker, { style: { backgroundColor: "white" }, selectedValue: selectedValue, onValueChange: onValueChange }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value }))))))))));
+};
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: "stretch",
+    },
+    picker: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        flexDirection: "row",
+        justifyContent: "center",
+    },
+    pickerContainer: {
+        backgroundColor: "white",
+        flexDirection: "column",
+        width: "100%",
+    },
+    closeButton: {
+        alignSelf: "flex-end",
+    },
+});
+export default withTheme(Picker);

package/src/components/Picker/PickerComponent.web.js

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import omit from "lodash.omit";
+import { withTheme } from "../../theming";
+import { extractStyles } from "../../utilities";
+import TextField from "../TextField";
+import Touchable from "../Touchable";
+const Picker = ({ style, options, placeholder, selectedValue, disabled = false, onValueChange: onValueChangeOverride = () => { }, ...props }) => {
+    var _a, _b;
+    const { viewStyles: { borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+    borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars
+    backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars
+    padding, // eslint-disable-line @typescript-eslint/no-unused-vars
+    paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars
+    paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars
+    paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars
+    paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars
+    ...viewStyles }, } = extractStyles(style);
+    const textField = React.useRef(undefined);
+    const onValueChange = (itemValue, itemIndex) => {
+        toggleFocus();
+        onValueChangeOverride(itemValue, itemIndex);
+    };
+    const toggleFocus = () => {
+        if (!disabled) {
+            // @ts-ignore
+            textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
+        }
+    };
+    const stylesWithoutMargin = style &&
+        omit(StyleSheet.flatten(style), [
+            "margin",
+            "marginTop",
+            "marginRight",
+            "marginBottom",
+            "marginLeft",
+        ]);
+    const selectedLabel = selectedValue &&
+        ((_b = (_a = options.find((o) => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
+    return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
+        React.createElement(View, null,
+            React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: onValueChange, style: {
+                    flex: 1,
+                    opacity: 0,
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    width: "100%",
+                } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
+            React.createElement(View, { pointerEvents: "none" },
+                React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder, 
+                    // @ts-ignore
+                    ref: textField, disabled: disabled, 
+                    // @ts-expect-error
+                    style: stylesWithoutMargin })))));
+};
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: "stretch",
+    },
+});
+export default withTheme(Picker);

package/src/components/Picker/PickerTypes.js

@@ -0,0 +1 @@
+export {};