@draftbit/core 53.0.4 → 53.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "53.0.4",
+  "version": "53.0.5",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -40,7 +40,7 @@
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/theme": "53.0.4",
+    "@draftbit/theme": "53.0.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@expo/vector-icons": "^14.1.0",
@@ -119,5 +119,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "9ede62f7ca2d3a092316652617b881a2260c3af7"
+  "gitHead": "1f4640f93a896cb9bbc03facbe3f27ebd845a521"
 }

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

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { StyleSheet, Keyboard } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Picker as NativePickerComponent } from "@react-native-picker/picker";
+import Portal from "../Portal/Portal";
+import { Button } from "../Button";
+import { useDeepCompareMemo } from "../../utilities";
+import { normalizeToPickerOptions, } from "./PickerCommon";
+import PickerInputContainer from "./PickerInputContainer";
+import { withTheme } from "@draftbit/theme";
+const PortalPickerContent = ({ value, options, placeholder, onValueChange, onClose, Icon, theme, autoDismissKeyboard = true, }) => {
+    const pickerRef = React.useRef(null);
+    // Manage value state inside the Portal to avoid stale state issues across the Portal boundary
+    const [internalValue, setInternalValue] = React.useState(value);
+    React.useEffect(() => {
+        setInternalValue(value);
+    }, [value]);
+    React.useEffect(() => {
+        if (autoDismissKeyboard) {
+            Keyboard.dismiss();
+        }
+    }, [autoDismissKeyboard]);
+    return (React.createElement(SafeAreaView, { style: [
+            styles.iosPickerContent,
+            { backgroundColor: theme.colors.background.base },
+        ] },
+        React.createElement(Button, { Icon: Icon, onPress: onClose, style: [styles.iosButton, { color: theme.colors.branding.primary }], title: "Close" }),
+        React.createElement(NativePickerComponent, { ref: pickerRef, testID: "native-picker-component", selectedValue: internalValue, onValueChange: (newValue) => {
+                setInternalValue(newValue);
+                if (newValue !== placeholder) {
+                    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+                }
+                else if (newValue === placeholder) {
+                    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("");
+                }
+            }, style: [
+                styles.iosNativePicker,
+                { backgroundColor: theme.colors.background.base },
+            ], onBlur: onClose }, options.map((option) => (React.createElement(NativePickerComponent.Item, { testID: "native-picker-item", label: option.label.toString(), value: option.value, key: option.value, color: theme.colors.text.strong }))))));
+};
+const NativePicker = ({ options: optionsProp = [], onValueChange, Icon, placeholder, value, autoDismissKeyboard = true, theme, disabled, ...rest }) => {
+    const [pickerVisible, setPickerVisible] = React.useState(false);
+    const options = useDeepCompareMemo(() => {
+        const normalizedOptions = normalizeToPickerOptions(optionsProp);
+        // 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
+        if (placeholder) {
+            return [{ label: placeholder, value: placeholder }, ...normalizedOptions];
+        }
+        else {
+            return normalizedOptions;
+        }
+    }, [placeholder, optionsProp]);
+    // When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+    if (!placeholder && options.length && !value && value !== options[0].value) {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(options[0].value);
+    }
+    return (React.createElement(PickerInputContainer, { testID: "native-picker", Icon: Icon, placeholder: placeholder, selectedValue: value, options: options, onPress: () => setPickerVisible(!pickerVisible), disabled: disabled, ...rest }, pickerVisible && !disabled && (React.createElement(Portal, null,
+        React.createElement(PortalPickerContent, { value: value, options: options, placeholder: placeholder, onValueChange: onValueChange, onClose: () => setPickerVisible(false), Icon: Icon, theme: theme, autoDismissKeyboard: autoDismissKeyboard })))));
+};
+const styles = StyleSheet.create({
+    iosNativePicker: {
+        backgroundColor: "white",
+    },
+    iosPickerContent: {
+        width: "100%",
+        position: "absolute",
+        bottom: 0,
+        backgroundColor: "white",
+    },
+    iosButton: {
+        backgroundColor: "transparent",
+        borderWidth: 0,
+    },
+});
+export default withTheme(NativePicker);
+//# sourceMappingURL=NativePicker.ios.js.map

package/src/components/Picker/NativePicker.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativePicker.ios.js","sourceRoot":"","sources":["NativePicker.ios.tsx"],"names":[],"mappings":"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"}

package/src/components/Picker/NativePicker.ios.tsx

@@ -0,0 +1,180 @@
+import * as React from "react";
+import { StyleSheet, Keyboard } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Picker as NativePickerComponent } from "@react-native-picker/picker";
+import Portal from "../Portal/Portal";
+import { Button } from "../Button";
+import { useDeepCompareMemo } from "../../utilities";
+import {
+  CommonPickerProps,
+  SinglePickerProps,
+  normalizeToPickerOptions,
+  PickerOption,
+} from "./PickerCommon";
+import PickerInputContainer from "./PickerInputContainer";
+import { ReadTheme, withTheme } from "@draftbit/theme";
+import { IconSlot } from "../../interfaces/Icon";
+
+/**
+ * Duplicated version of NativePicker.tsx for maintaining state inside the Portal container to avoid this issue
+ * https://github.com/react-native-picker/picker/issues/615
+ */
+
+interface PortalPickerContentProps extends IconSlot {
+  value: string | number | undefined;
+  options: PickerOption[];
+  placeholder?: string;
+  onValueChange?: (value: string | number) => void;
+  onClose: () => void;
+  theme: ReadTheme;
+  autoDismissKeyboard?: boolean;
+}
+
+const PortalPickerContent: React.FC<PortalPickerContentProps> = ({
+  value,
+  options,
+  placeholder,
+  onValueChange,
+  onClose,
+  Icon,
+  theme,
+  autoDismissKeyboard = true,
+}) => {
+  const pickerRef = React.useRef<NativePickerComponent<string | number>>(null);
+
+  // Manage value state inside the Portal to avoid stale state issues across the Portal boundary
+  const [internalValue, setInternalValue] = React.useState<
+    string | number | undefined
+  >(value);
+
+  React.useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  React.useEffect(() => {
+    if (autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [autoDismissKeyboard]);
+
+  return (
+    <SafeAreaView
+      style={[
+        styles.iosPickerContent,
+        { backgroundColor: theme.colors.background.base },
+      ]}
+    >
+      <Button
+        Icon={Icon}
+        onPress={onClose}
+        style={[styles.iosButton, { color: theme.colors.branding.primary }]}
+        title="Close"
+      />
+      <NativePickerComponent
+        ref={pickerRef}
+        testID="native-picker-component"
+        selectedValue={internalValue}
+        onValueChange={(newValue) => {
+          setInternalValue(newValue);
+          if (newValue !== placeholder) {
+            onValueChange?.(newValue);
+          } else if (newValue === placeholder) {
+            onValueChange?.("");
+          }
+        }}
+        style={[
+          styles.iosNativePicker,
+          { backgroundColor: theme.colors.background.base },
+        ]}
+        onBlur={onClose}
+      >
+        {options.map((option) => (
+          <NativePickerComponent.Item
+            testID="native-picker-item"
+            label={option.label.toString()}
+            value={option.value}
+            key={option.value}
+            color={theme.colors.text.strong}
+          />
+        ))}
+      </NativePickerComponent>
+    </SafeAreaView>
+  );
+};
+
+const NativePicker: React.FC<CommonPickerProps & SinglePickerProps> = ({
+  options: optionsProp = [],
+  onValueChange,
+  Icon,
+  placeholder,
+  value,
+  autoDismissKeyboard = true,
+  theme,
+  disabled,
+  ...rest
+}) => {
+  const [pickerVisible, setPickerVisible] = React.useState(false);
+
+  const options = useDeepCompareMemo(() => {
+    const normalizedOptions = normalizeToPickerOptions(optionsProp);
+
+    // 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
+    if (placeholder) {
+      return [{ label: placeholder, value: placeholder }, ...normalizedOptions];
+    } else {
+      return normalizedOptions;
+    }
+  }, [placeholder, optionsProp]);
+
+  // When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+  if (!placeholder && options.length && !value && value !== options[0].value) {
+    onValueChange?.(options[0].value);
+  }
+
+  return (
+    <PickerInputContainer
+      testID="native-picker"
+      Icon={Icon}
+      placeholder={placeholder}
+      selectedValue={value}
+      options={options}
+      onPress={() => setPickerVisible(!pickerVisible)}
+      disabled={disabled}
+      {...rest}
+    >
+      {pickerVisible && !disabled && (
+        <Portal>
+          <PortalPickerContent
+            value={value}
+            options={options}
+            placeholder={placeholder}
+            onValueChange={onValueChange}
+            onClose={() => setPickerVisible(false)}
+            Icon={Icon}
+            theme={theme}
+            autoDismissKeyboard={autoDismissKeyboard}
+          />
+        </Portal>
+      )}
+    </PickerInputContainer>
+  );
+};
+
+const styles = StyleSheet.create({
+  iosNativePicker: {
+    backgroundColor: "white",
+  },
+  iosPickerContent: {
+    width: "100%",
+    position: "absolute",
+    bottom: 0,
+    backgroundColor: "white",
+  },
+  iosButton: {
+    backgroundColor: "transparent",
+    borderWidth: 0,
+  },
+});
+
+export default withTheme(NativePicker);

package/src/components/Picker/NativePicker.js

@@ -1,14 +1,10 @@
 import * as React from "react";
 import { StyleSheet, Platform, Keyboard } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
 import { Picker as NativePickerComponent } from "@react-native-picker/picker";
-import Portal from "../Portal/Portal";
-import { Button } from "../Button";
 import { useDeepCompareMemo } from "../../utilities";
 import { normalizeToPickerOptions, } from "./PickerCommon";
 import PickerInputContainer from "./PickerInputContainer";
 import { withTheme } from "@draftbit/theme";
-const isIos = Platform.OS === "ios";
 const isAndroid = Platform.OS === "android";
 const isWeb = Platform.OS === "web";
 const NativePicker = ({ options: optionsProp = [], onValueChange, Icon, placeholder, value, autoDismissKeyboard = true, theme, disabled, ...rest }) => {
@@ -36,21 +32,7 @@ const NativePicker = ({ options: optionsProp = [], onValueChange, Icon, placehol
             else if (newValue === placeholder) {
                 onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("");
             }
-        }, style: isIos ? styles.iosNativePicker : styles.nativePicker, onBlur: () => setPickerVisible(false) }, options.map((option) => (React.createElement(NativePickerComponent.Item, { testID: "native-picker-item", label: option.label.toString(), value: option.value, key: option.value })))));
-    const renderPicker = () => {
-        if (isIos) {
-            return (React.createElement(Portal, null,
-                React.createElement(SafeAreaView, { style: styles.iosPickerContent },
-                    React.createElement(Button, { Icon: Icon, onPress: () => setPickerVisible(!pickerVisible), style: [
-                            styles.iosButton,
-                            { color: theme.colors.branding.primary },
-                        ], title: "Close" }),
-                    renderNativePicker())));
-        }
-        else {
-            return renderNativePicker();
-        }
-    };
+        }, style: styles.nativePicker, onBlur: () => setPickerVisible(false) }, options.map((option) => (React.createElement(NativePickerComponent.Item, { testID: "native-picker-item", label: option.label.toString(), value: option.value, key: option.value })))));
     React.useEffect(() => {
         var _a;
         if (pickerVisible && pickerRef.current) {
@@ -62,7 +44,9 @@ const NativePicker = ({ options: optionsProp = [], onValueChange, Icon, placehol
             Keyboard.dismiss();
         }
     }, [pickerVisible, autoDismissKeyboard]);
-    return (React.createElement(PickerInputContainer, { testID: "native-picker", Icon: Icon, placeholder: placeholder, selectedValue: value, options: options, onPress: () => setPickerVisible(!pickerVisible), disabled: disabled, ...rest }, (pickerVisible || isAndroid || isWeb) && !disabled && renderPicker()));
+    return (React.createElement(PickerInputContainer, { testID: "native-picker", Icon: Icon, placeholder: placeholder, selectedValue: value, options: options, onPress: () => setPickerVisible(!pickerVisible), disabled: disabled, ...rest }, (pickerVisible || isAndroid || isWeb) &&
+        !disabled &&
+        renderNativePicker()));
 };
 const styles = StyleSheet.create({
     nativePicker: {
@@ -77,26 +61,13 @@ const styles = StyleSheet.create({
         opacity: 0,
         ...Platform.select({
             web: {
-                height: "100%", //To have the <select/> element fill the height
+                height: "100%",
             },
             android: {
-                opacity: 0, // picker is a dialog, we don't want to show the default 'picker button' component
+                opacity: 0,
             },
         }),
     },
-    iosNativePicker: {
-        backgroundColor: "white",
-    },
-    iosPickerContent: {
-        width: "100%",
-        position: "absolute",
-        bottom: 0,
-        backgroundColor: "white",
-    },
-    iosButton: {
-        backgroundColor: "transparent",
-        borderWidth: 0,
-    },
 });
 export default withTheme(NativePicker);
 //# sourceMappingURL=NativePicker.js.map

package/src/components/Picker/NativePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativePicker.js","sourceRoot":"","sources":["NativePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAGL,wBAAwB,GACzB,MAAM,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,KAAK,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC;AACpC,MAAM,SAAS,GAAG,QAAQ,CAAC,EAAE,KAAK,SAAS,CAAC;AAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC;AAEpC,MAAM,YAAY,GAAoD,CAAC,EACrE,OAAO,EAAE,WAAW,GAAG,EAAE,EACzB,aAAa,EACb,IAAI,EACJ,WAAW,EACX,KAAK,EACL,mBAAmB,GAAG,IAAI,EAC1B,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAyC,IAAI,CAAC,CAAC;IAE7E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,EAAE;QACtC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;QAEhE,4GAA4G;QAC5G,2FAA2F;QAC3F,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,GAAG,iBAAiB,CAAC,CAAC;QAC5E,CAAC;aAAM,CAAC;YACN,OAAO,iBAAiB,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAE/B,wHAAwH;IACxH,IAAI,CAAC,WAAW,IAAI,OAAO,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAC3E,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,CAC/B,oBAAC,qBAAqB,IACpB,GAAG,EAAE,SAAS,EACd,MAAM,EAAC,yBAAyB,EAChC,aAAa,EAAE,KAAK,EACpB,aAAa,EAAE,CAAC,QAAQ,EAAE,EAAE;YAC1B,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;gBAC7B,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,QAAQ,CAAC,CAAC;YAC5B,CAAC;iBAAM,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;gBACpC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,EAAE,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAC3D,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAEpC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,qBAAqB,CAAC,IAAI,IACzB,MAAM,EAAC,oBAAoB,EAC3B,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,EAC9B,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,GAAG,EAAE,MAAM,CAAC,KAAK,GACjB,CACH,CAAC,CACoB,CACzB,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,CACL,oBAAC,MAAM;gBACL,oBAAC,YAAY,IAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB;oBAC1C,oBAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,EAC/C,KAAK,EAAE;4BACL,MAAM,CAAC,SAAS;4BAChB,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,EAAE;yBACzC,EACD,KAAK,EAAC,OAAO,GACb;oBACD,kBAAkB,EAAE,CACR,CACR,CACV,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,kBAAkB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACnB,IAAI,aAAa,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACvC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;IAE/B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,aAAa,IAAI,mBAAmB,EAAE,CAAC;YACzC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACrB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,oBAAoB,IACnB,MAAM,EAAC,eAAe,EACtB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,KAAK,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,EAC/C,QAAQ,EAAE,QAAQ,KACd,IAAI,IAIP,CAAC,aAAa,IAAI,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,YAAY,EAAE,CAChD,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,YAAY,EAAE;QACZ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,QAAQ;QACxB,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,OAAO;QACxB,OAAO,EAAE,CAAC;QACV,GAAG,QAAQ,CAAC,MAAM,CAAC;YACjB,GAAG,EAAE;gBACH,MAAM,EAAE,MAAM,EAAE,+CAA+C;aAChE;YACD,OAAO,EAAE;gBACP,OAAO,EAAE,CAAC,EAAE,kFAAkF;aAC/F;SACF,CAAC;KACH;IACD,eAAe,EAAE;QACf,eAAe,EAAE,OAAO;KACzB;IACD,gBAAgB,EAAE;QAChB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;QACT,eAAe,EAAE,OAAO;KACzB;IACD,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;QAC9B,WAAW,EAAE,CAAC;KACf;CACF,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC,YAAY,CAAC,CAAC"}
+{"version":3,"file":"NativePicker.js","sourceRoot":"","sources":["NativePicker.tsx"],"names":[],"mappings":"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"}

package/src/components/Picker/NativePicker.tsx

@@ -1,9 +1,6 @@
 import * as React from "react";
 import { StyleSheet, Platform, Keyboard } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
 import { Picker as NativePickerComponent } from "@react-native-picker/picker";
-import Portal from "../Portal/Portal";
-import { Button } from "../Button";
 import { useDeepCompareMemo } from "../../utilities";
 import {
   CommonPickerProps,
@@ -13,7 +10,6 @@ import {
 import PickerInputContainer from "./PickerInputContainer";
 import { withTheme } from "@draftbit/theme";
 
-const isIos = Platform.OS === "ios";
 const isAndroid = Platform.OS === "android";
 const isWeb = Platform.OS === "web";
 
@@ -61,7 +57,7 @@ const NativePicker: React.FC<CommonPickerProps & SinglePickerProps> = ({
           onValueChange?.("");
         }
       }}
-      style={isIos ? styles.iosNativePicker : styles.nativePicker}
+      style={styles.nativePicker}
       onBlur={() => setPickerVisible(false)}
     >
       {options.map((option) => (
@@ -75,29 +71,6 @@ const NativePicker: React.FC<CommonPickerProps & SinglePickerProps> = ({
     </NativePickerComponent>
   );
 
-  const renderPicker = () => {
-    if (isIos) {
-      return (
-        <Portal>
-          <SafeAreaView style={styles.iosPickerContent}>
-            <Button
-              Icon={Icon}
-              onPress={() => setPickerVisible(!pickerVisible)}
-              style={[
-                styles.iosButton,
-                { color: theme.colors.branding.primary },
-              ]}
-              title="Close"
-            />
-            {renderNativePicker()}
-          </SafeAreaView>
-        </Portal>
-      );
-    } else {
-      return renderNativePicker();
-    }
-  };
-
   React.useEffect(() => {
     if (pickerVisible && pickerRef.current) {
       pickerRef?.current?.focus();
@@ -123,7 +96,9 @@ const NativePicker: React.FC<CommonPickerProps & SinglePickerProps> = ({
     >
       {/* Web version is collapsed by default, always show to allow direct expand */}
       {/* Android version needs to always be visible to allow .focus() call to launch the dialog  */}
-      {(pickerVisible || isAndroid || isWeb) && !disabled && renderPicker()}
+      {(pickerVisible || isAndroid || isWeb) &&
+        !disabled &&
+        renderNativePicker()}
     </PickerInputContainer>
   );
 };
@@ -141,26 +116,13 @@ const styles = StyleSheet.create({
     opacity: 0,
     ...Platform.select({
       web: {
-        height: "100%", //To have the <select/> element fill the height
+        height: "100%",
       },
       android: {
-        opacity: 0, // picker is a dialog, we don't want to show the default 'picker button' component
+        opacity: 0,
       },
     }),
   },
-  iosNativePicker: {
-    backgroundColor: "white",
-  },
-  iosPickerContent: {
-    width: "100%",
-    position: "absolute",
-    bottom: 0,
-    backgroundColor: "white",
-  },
-  iosButton: {
-    backgroundColor: "transparent",
-    borderWidth: 0,
-  },
 });
 
 export default withTheme(NativePicker);