@draftbit/core 47.1.1-ee131b.2 → 47.2.1-a33ddf.2

package/src/components/BottomSheet/index.js

@@ -0,0 +1 @@
+export { default as BottomSheet } from "./BottomSheet";

package/src/components/BottomSheet/index.ts

@@ -0,0 +1 @@
+export { default as BottomSheet } from "./BottomSheet";

package/src/components/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, } from "react-native";
+import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, Keyboard, } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import dateFormat from "dateformat";
 import { withTheme } from "../../theming";
@@ -25,7 +25,7 @@ const MONTHS = [
     "November",
     "December",
 ];
-const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, ...props }) => {
+const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, autoDismissKeyboard = true, ...props }) => {
     const [value, setValue] = React.useState(date || defaultValue);
     React.useEffect(() => {
         if (defaultValue != null) {
@@ -113,6 +113,11 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
             clearTimeout(_showPlaceholder());
         };
     }, [focused, label, placeholder]);
+    React.useEffect(() => {
+        if (pickerVisible && autoDismissKeyboard) {
+            Keyboard.dismiss();
+        }
+    }, [pickerVisible, autoDismissKeyboard]);
     const _handleFocus = () => {
         if (disabled) {
             return;
@@ -132,7 +137,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         ? labelSize
         : typography.caption.fontSize;
     const hasActiveOutline = focused;
-    let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
+    let inputTextColor, activeColor, underlineColor, borderColor = inputBorderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
     inputTextColor = colors.strong;
     if (disabled) {
         activeColor = colors.light;

package/src/components/DatePicker/DatePicker.tsx

@@ -12,6 +12,7 @@ import {
   I18nManager,
   LayoutChangeEvent,
   TextInput as NativeTextInput,
+  Keyboard,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -55,6 +56,7 @@ type Props = {
   rightIconName?: string;
   borderColor?: string;
   borderColorActive?: string;
+  autoDismissKeyboard?: boolean;
 } & IconSlot &
   TextInputProps;
 
@@ -93,6 +95,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   placeholder,
   borderColor: inputBorderColor,
   borderColorActive: inputBorderColorActive,
+  autoDismissKeyboard = true,
   ...props
 }) => {
   const [value, setValue] = React.useState<any>(date || defaultValue);
@@ -204,6 +207,12 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     };
   }, [focused, label, placeholder]);
 
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
+
   const _handleFocus = () => {
     if (disabled) {
       return;
@@ -232,7 +241,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   let inputTextColor,
     activeColor,
     underlineColor,
-    borderColor,
+    borderColor = inputBorderColor,
     placeholderColor,
     containerStyle: StyleProp<ViewStyle>,
     backgroundColor,

package/src/components/DeckSwiper/DeckSwiper.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import DeckSwiperComponent from "react-native-deck-swiper";
+const DeckSwiper = ({ onIndexChanged, onEndReached, startCardIndex = 0, infiniteSwiping = false, verticalEnabled = true, horizontalEnabled = true, visibleCardCount = 1, data, keyExtractor, renderItem, style, children, }) => {
+    //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
+    if ((data && !renderItem) || (renderItem && !data)) {
+        throw new Error("'renderItem' and 'data' need to both be provided to lazily render. Either remove them entirley or include both");
+    }
+    if (data && renderItem && children) {
+        console.warn("'children' of DeckSwiper ignored due to usage of 'data' and 'renderItem'");
+    }
+    const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
+    // an array of indices based on children count
+    const cardsFillerData = React.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
+    const cardsData = data || cardsFillerData;
+    const renderCard = (card, index) => {
+        if (renderItem) {
+            return renderItem({ item: card, index });
+        }
+        else {
+            return React.createElement(React.Fragment, null, childrenArray[index]);
+        }
+    };
+    const renderFirstCard = () => {
+        if (cardsData.length) {
+            return renderCard(cardsData[0], 0);
+        }
+        return undefined;
+    };
+    const cardKeyExtractor = (card) => {
+        if (keyExtractor) {
+            return keyExtractor(card);
+        }
+        else {
+            return card === null || card === void 0 ? void 0 : card.toString();
+        }
+    };
+    /**
+     * By default react-native-deck-swiper positions everything with absolute position.
+     * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
+     *
+     *
+     * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
+     * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
+     * This effectivley makes the default height of the container be the height of the first card.
+     */
+    return (React.createElement(View, null,
+        React.createElement(View, { style: styles.containerHeightFiller }, renderFirstCard()),
+        React.createElement(DeckSwiperComponent, { cards: cardsData, renderCard: renderCard, keyExtractor: cardKeyExtractor, containerStyle: StyleSheet.flatten([styles.cardsContainer, style]), cardStyle: styles.card, onSwiped: onIndexChanged, onSwipedAll: onEndReached, cardIndex: startCardIndex, infinite: infiniteSwiping, verticalSwipe: verticalEnabled, horizontalSwipe: horizontalEnabled, showSecondCard: visibleCardCount > 1, stackSize: visibleCardCount, backgroundColor: "transparent", cardVerticalMargin: 0, cardHorizontalMargin: 0 })));
+};
+const styles = StyleSheet.create({
+    cardsContainer: {
+        position: "absolute",
+    },
+    card: {
+        left: 0,
+        right: 0,
+        width: "auto",
+        height: "auto",
+    },
+    containerHeightFiller: {
+        opacity: 0.0,
+    },
+});
+export default DeckSwiper;

package/src/components/DeckSwiper/DeckSwiper.tsx

@@ -0,0 +1,136 @@
+import React from "react";
+import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
+import DeckSwiperComponent from "react-native-deck-swiper";
+
+export interface DeckSwiperProps<T> {
+  onIndexChanged?: (index: number) => void;
+  onEndReached?: () => void;
+  startCardIndex?: number;
+  infiniteSwiping?: boolean;
+  verticalEnabled?: boolean;
+  horizontalEnabled?: boolean;
+  visibleCardCount?: number;
+  data?: Array<T>;
+  keyExtractor?: (item: T) => string;
+  renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
+  style?: StyleProp<ViewStyle>;
+}
+
+const DeckSwiper = <T extends object>({
+  onIndexChanged,
+  onEndReached,
+  startCardIndex = 0,
+  infiniteSwiping = false,
+  verticalEnabled = true,
+  horizontalEnabled = true,
+  visibleCardCount = 1,
+  data,
+  keyExtractor,
+  renderItem,
+  style,
+  children,
+}: React.PropsWithChildren<DeckSwiperProps<T>>) => {
+  //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
+  if ((data && !renderItem) || (renderItem && !data)) {
+    throw new Error(
+      "'renderItem' and 'data' need to both be provided to lazily render. Either remove them entirley or include both"
+    );
+  }
+
+  if (data && renderItem && children) {
+    console.warn(
+      "'children' of DeckSwiper ignored due to usage of 'data' and 'renderItem'"
+    );
+  }
+
+  const childrenArray = React.useMemo(
+    () => React.Children.toArray(children),
+    [children]
+  );
+
+  // an array of indices based on children count
+  const cardsFillerData = React.useMemo(
+    () => Array.from(Array(childrenArray.length).keys()),
+    [childrenArray]
+  );
+
+  const cardsData = data || cardsFillerData;
+
+  const renderCard = (card: any, index: number): JSX.Element => {
+    if (renderItem) {
+      return renderItem({ item: card, index });
+    } else {
+      return <>{childrenArray[index]}</>;
+    }
+  };
+
+  const renderFirstCard = (): JSX.Element | undefined => {
+    if (cardsData.length) {
+      return renderCard(cardsData[0], 0);
+    }
+    return undefined;
+  };
+
+  const cardKeyExtractor = (card: any) => {
+    if (keyExtractor) {
+      return keyExtractor(card);
+    } else {
+      return card?.toString();
+    }
+  };
+
+  /**
+   * By default react-native-deck-swiper positions everything with absolute position.
+   * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
+   *
+   *
+   * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
+   * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
+   * This effectivley makes the default height of the container be the height of the first card.
+   */
+
+  return (
+    <View>
+      <View style={styles.containerHeightFiller}>{renderFirstCard()}</View>
+      <DeckSwiperComponent
+        cards={cardsData as any[]}
+        renderCard={renderCard}
+        keyExtractor={cardKeyExtractor}
+        containerStyle={
+          StyleSheet.flatten([styles.cardsContainer, style]) as
+            | object
+            | undefined
+        }
+        cardStyle={styles.card as object | undefined}
+        onSwiped={onIndexChanged}
+        onSwipedAll={onEndReached}
+        cardIndex={startCardIndex}
+        infinite={infiniteSwiping}
+        verticalSwipe={verticalEnabled}
+        horizontalSwipe={horizontalEnabled}
+        showSecondCard={visibleCardCount > 1}
+        stackSize={visibleCardCount}
+        backgroundColor="transparent"
+        cardVerticalMargin={0}
+        cardHorizontalMargin={0}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cardsContainer: {
+    position: "absolute",
+  },
+  card: {
+    left: 0,
+    right: 0,
+    width: "auto",
+    height: "auto",
+  },
+  containerHeightFiller: {
+    opacity: 0.0,
+  },
+});
+
+export default DeckSwiper;

package/src/components/DeckSwiper/DeckSwiperCard.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+const DeckSwiperCard = ({ style, children, theme }) => (React.createElement(View, { style: [
+        styles.card,
+        {
+            backgroundColor: theme.colors.background,
+            borderColor: theme.colors.divider,
+        },
+        style,
+    ] }, children));
+const styles = StyleSheet.create({
+    card: {
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 20,
+        borderWidth: 2,
+    },
+});
+export default withTheme(DeckSwiperCard);

package/src/components/DeckSwiper/DeckSwiperCard.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import type { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+
+export interface DeckSwiperCardProps {
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+}
+
+const DeckSwiperCard: React.FC<
+  React.PropsWithChildren<DeckSwiperCardProps>
+> = ({ style, children, theme }) => (
+  <View
+    style={[
+      styles.card,
+      {
+        backgroundColor: theme.colors.background,
+        borderColor: theme.colors.divider,
+      },
+      style,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2,
+  },
+});
+
+export default withTheme(DeckSwiperCard);

package/src/components/DeckSwiper/index.js

@@ -0,0 +1,2 @@
+export { default as DeckSwiper } from "./DeckSwiper";
+export { default as DeckSwiperCard } from "./DeckSwiperCard";

package/src/components/DeckSwiper/index.tsx

@@ -0,0 +1,2 @@
+export { default as DeckSwiper } from "./DeckSwiper";
+export { default as DeckSwiperCard } from "./DeckSwiperCard";

package/src/components/Markdown.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import MarkdownComponent from "react-native-markdown-display";
+const Markdown = ({ children, style, }) => {
+    return (
+    //'body' style applies to all markdown components
+    //@ts-ignore TS does not like the type of this named style for some reason
+    React.createElement(MarkdownComponent, { style: { body: StyleSheet.flatten(style) } }, children));
+};
+export default Markdown;

package/src/components/Markdown.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { StyleProp, ViewStyle, StyleSheet } from "react-native";
+import MarkdownComponent from "react-native-markdown-display";
+
+type MarkdownProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+const Markdown: React.FC<React.PropsWithChildren<MarkdownProps>> = ({
+  children,
+  style,
+}) => {
+  return (
+    //'body' style applies to all markdown components
+    //@ts-ignore TS does not like the type of this named style for some reason
+    <MarkdownComponent style={{ body: StyleSheet.flatten(style) }}>
+      {children}
+    </MarkdownComponent>
+  );
+};
+
+export default Markdown;

package/src/components/NumberInput.js

@@ -2,7 +2,7 @@ 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 [currentStringNumberValue, setCurrentStringNumberValue] = useState("");
     const formatValueToStringNumber = (valueToFormat) => {
         if (valueToFormat != null) {
             if (isString(valueToFormat) && valueToFormat !== "") {
@@ -20,16 +20,8 @@ const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
                 return valueToFormat.toString();
             }
         }
-        return "0";
+        return "";
     };
-    // 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);
@@ -44,6 +36,14 @@ const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
+    // 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
+    }, []);
     return (React.createElement(TextInput, { keyboardType: "numeric", value: currentStringNumberValue, onChangeText: handleChangeText, ...props }));
 };
 export default NumberInput;

package/src/components/NumberInput.tsx

@@ -14,7 +14,7 @@ const NumberInput: FC<Props> = ({
   defaultValue,
   ...props
 }) => {
-  const [currentStringNumberValue, setCurrentStringNumberValue] = useState("0");
+  const [currentStringNumberValue, setCurrentStringNumberValue] = useState("");
 
   const formatValueToStringNumber = (valueToFormat?: number | string) => {
     if (valueToFormat != null) {
@@ -31,19 +31,9 @@ const NumberInput: FC<Props> = ({
       }
     }
 
-    return "0";
+    return "";
   };
 
-  // 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: string) => {
     const newStringNumberValue = formatValueToStringNumber(newValue);
     const number = parseFloat(newStringNumberValue);
@@ -62,6 +52,16 @@ const NumberInput: FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
+  // 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
+  }, []);
+
   return (
     <TextInput
       keyboardType="numeric"

package/src/components/Picker/Picker.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, Dimensions, } from "react-native";
+import { View, StyleSheet, Text, Platform, Dimensions, Keyboard, } 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";
@@ -32,10 +32,13 @@ function normalizeOptions(options) {
 }
 const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
 const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
 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", }) => {
+//Empty string for 'value' is treated as a non-value
+//reason: Draftbit uses empty string as initial value for string state*/
+const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", autoDismissKeyboard = true, }) => {
     var _a, _b;
     const androidPickerRef = React.useRef(undefined);
     const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -44,12 +47,15 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
         setPickerVisible(!pickerVisible);
     };
     React.useEffect(() => {
-        if (value != null) {
+        if (value != null && value !== "") {
             setInternalValue(value);
         }
+        else if (value === "") {
+            setInternalValue(undefined);
+        }
     }, [value]);
     React.useEffect(() => {
-        if (defaultValue != null) {
+        if (defaultValue != null && defaultValue !== "") {
             setInternalValue(defaultValue);
         }
     }, [defaultValue]);
@@ -59,11 +65,26 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
             (_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;
+    React.useEffect(() => {
+        if (pickerVisible && autoDismissKeyboard) {
+            Keyboard.dismiss();
+        }
+    }, [pickerVisible, autoDismissKeyboard]);
+    const normalizedOptions = React.useMemo(() => normalizeOptions(options), [options]);
+    //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+    //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+    const pickerOptions = React.useMemo(() => placeholder
+        ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
+        : normalizedOptions, [placeholder, normalizedOptions]);
+    //When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+    if (!placeholder &&
+        pickerOptions.length &&
+        !internalValue &&
+        internalValue !== pickerOptions[0].value //Prevent infinite state changes incase first value is falsy
+    ) {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(pickerOptions[0].value, 0);
+        setInternalValue(pickerOptions[0].value);
+    }
     const { viewStyles, textStyles } = extractStyles(style);
     const additionalBorderStyles = ["backgroundColor"];
     const additionalMarginStyles = [
@@ -158,10 +179,14 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
         ...(disabled ? { color: unstyledColor } : {}),
     };
     const handleValueChange = (newValue, itemIndex) => {
-        if (!placeholder || itemIndex > 0) {
+        if (newValue !== "" && newValue !== placeholder) {
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue, itemIndex);
+            setInternalValue(newValue);
+        }
+        else if (newValue === placeholder) {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("", 0);
+            setInternalValue(undefined);
         }
-        setInternalValue(newValue);
     };
     return (
     /* marginsContainer */
@@ -183,16 +208,11 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
                     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(SafeAreaView, { style: styles.iosPicker },
+                React.createElement(View, { style: styles.iosPickerContent },
                     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));
+        !isIos && (pickerVisible || isWeb) ? (React.createElement(NativePicker, { enabled: !disabled, 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: {
@@ -239,9 +259,9 @@ const styles = StyleSheet.create({
         width: "100%",
         maxWidth: deviceWidth,
         maxHeight: deviceHeight,
-    },
-    iosSafeArea: {
         backgroundColor: "white",
+    },
+    iosPickerContent: {
         flexDirection: "column",
         width: "100%",
         maxWidth: deviceWidth,