@draftbit/core 53.0.4 → 53.0.5-6f875c.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/Picker/NativePicker.ios.js +1 -0
- package/lib/commonjs/components/Picker/NativePicker.js +1 -1
- package/lib/typescript/src/components/Picker/NativePicker.ios.d.ts +4 -0
- package/lib/typescript/src/components/Picker/NativePicker.ios.js +77 -0
- package/lib/typescript/src/components/Picker/NativePicker.ios.js.map +1 -0
- package/lib/typescript/src/components/Picker/NativePicker.js +6 -35
- package/lib/typescript/src/components/Picker/NativePicker.js.map +1 -1
- package/lib/typescript/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/components/Picker/NativePicker.ios.js +77 -0
- package/src/components/Picker/NativePicker.ios.js.map +1 -0
- package/src/components/Picker/NativePicker.ios.tsx +180 -0
- package/src/components/Picker/NativePicker.js +6 -35
- package/src/components/Picker/NativePicker.js.map +1 -1
- package/src/components/Picker/NativePicker.tsx +6 -44
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _picker=require("@react-native-picker/picker");var _Portal=_interopRequireDefault(require("../Portal/Portal"));var _Button=require("../Button");var _utilities=require("../../utilities");var _PickerCommon=require("./PickerCommon");var _PickerInputContainer=_interopRequireDefault(require("./PickerInputContainer"));var _theme=require("@draftbit/theme");var _jsxRuntime=require("react/jsx-runtime");var _excluded=["options","onValueChange","Icon","placeholder","value","autoDismissKeyboard","theme","disabled"];var _this=this,_jsxFileName="/home/runner/work/react-native-jigsaw/react-native-jigsaw/packages/core/src/components/Picker/NativePicker.ios.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var PortalPickerContent=function PortalPickerContent(_ref){var value=_ref.value,options=_ref.options,placeholder=_ref.placeholder,_onValueChange=_ref.onValueChange,onClose=_ref.onClose,Icon=_ref.Icon,theme=_ref.theme,_ref$autoDismissKeybo=_ref.autoDismissKeyboard,autoDismissKeyboard=_ref$autoDismissKeybo===void 0?true:_ref$autoDismissKeybo;var pickerRef=React.useRef(null);var _React$useState=React.useState(value),_React$useState2=(0,_slicedToArray2.default)(_React$useState,2),internalValue=_React$useState2[0],setInternalValue=_React$useState2[1];React.useEffect(function(){setInternalValue(value);},[value]);React.useEffect(function(){if(autoDismissKeyboard){_reactNative.Keyboard.dismiss();}},[autoDismissKeyboard]);return(0,_jsxRuntime.jsxs)(_reactNativeSafeAreaContext.SafeAreaView,{style:[styles.iosPickerContent,{backgroundColor:theme.colors.background.base}],children:[(0,_jsxRuntime.jsx)(_Button.Button,{Icon:Icon,onPress:onClose,style:[styles.iosButton,{color:theme.colors.branding.primary}],title:"Close"}),(0,_jsxRuntime.jsx)(_picker.Picker,{ref:pickerRef,testID:"native-picker-component",selectedValue:internalValue,onValueChange:function onValueChange(newValue){setInternalValue(newValue);if(newValue!==placeholder){_onValueChange==null||_onValueChange(newValue);}else if(newValue===placeholder){_onValueChange==null||_onValueChange("");}},style:[styles.iosNativePicker,{backgroundColor:theme.colors.background.base}],onBlur:onClose,children:options.map(function(option){return(0,_jsxRuntime.jsx)(_picker.Picker.Item,{testID:"native-picker-item",label:option.label.toString(),value:option.value,color:theme.colors.text.strong},option.value);})})]});};var NativePicker=function NativePicker(_ref2){var _ref2$options=_ref2.options,optionsProp=_ref2$options===void 0?[]:_ref2$options,onValueChange=_ref2.onValueChange,Icon=_ref2.Icon,placeholder=_ref2.placeholder,value=_ref2.value,_ref2$autoDismissKeyb=_ref2.autoDismissKeyboard,autoDismissKeyboard=_ref2$autoDismissKeyb===void 0?true:_ref2$autoDismissKeyb,theme=_ref2.theme,disabled=_ref2.disabled,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var _React$useState3=React.useState(false),_React$useState4=(0,_slicedToArray2.default)(_React$useState3,2),pickerVisible=_React$useState4[0],setPickerVisible=_React$useState4[1];var options=(0,_utilities.useDeepCompareMemo)(function(){var normalizedOptions=(0,_PickerCommon.normalizeToPickerOptions)(optionsProp);if(placeholder){return[{label:placeholder,value:placeholder}].concat((0,_toConsumableArray2.default)(normalizedOptions));}else{return normalizedOptions;}},[placeholder,optionsProp]);if(!placeholder&&options.length&&!value&&value!==options[0].value){onValueChange==null||onValueChange(options[0].value);}return(0,_jsxRuntime.jsx)(_PickerInputContainer.default,Object.assign({testID:"native-picker",Icon:Icon,placeholder:placeholder,selectedValue:value,options:options,onPress:function onPress(){return setPickerVisible(!pickerVisible);},disabled:disabled},rest,{children:pickerVisible&&!disabled&&(0,_jsxRuntime.jsx)(_Portal.default,{children:(0,_jsxRuntime.jsx)(PortalPickerContent,{value:value,options:options,placeholder:placeholder,onValueChange:onValueChange,onClose:function onClose(){return setPickerVisible(false);},Icon:Icon,theme:theme,autoDismissKeyboard:autoDismissKeyboard})})}));};var styles=_reactNative.StyleSheet.create({iosNativePicker:{backgroundColor:"white"},iosPickerContent:{width:"100%",position:"absolute",bottom:0,backgroundColor:"white"},iosButton:{backgroundColor:"transparent",borderWidth:0}});var _default=exports.default=(0,_theme.withTheme)(NativePicker);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _picker=require("@react-native-picker/picker");var _utilities=require("../../utilities");var _PickerCommon=require("./PickerCommon");var _PickerInputContainer=_interopRequireDefault(require("./PickerInputContainer"));var _theme=require("@draftbit/theme");var _jsxRuntime=require("react/jsx-runtime");var _excluded=["options","onValueChange","Icon","placeholder","value","autoDismissKeyboard","theme","disabled"];var _this=this,_jsxFileName="/home/runner/work/react-native-jigsaw/react-native-jigsaw/packages/core/src/components/Picker/NativePicker.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var isAndroid=_reactNative.Platform.OS==="android";var isWeb=_reactNative.Platform.OS==="web";var NativePicker=function NativePicker(_ref){var _ref$options=_ref.options,optionsProp=_ref$options===void 0?[]:_ref$options,_onValueChange=_ref.onValueChange,Icon=_ref.Icon,placeholder=_ref.placeholder,value=_ref.value,_ref$autoDismissKeybo=_ref.autoDismissKeyboard,autoDismissKeyboard=_ref$autoDismissKeybo===void 0?true:_ref$autoDismissKeybo,theme=_ref.theme,disabled=_ref.disabled,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var pickerRef=React.useRef(null);var _React$useState=React.useState(false),_React$useState2=(0,_slicedToArray2.default)(_React$useState,2),pickerVisible=_React$useState2[0],setPickerVisible=_React$useState2[1];var options=(0,_utilities.useDeepCompareMemo)(function(){var normalizedOptions=(0,_PickerCommon.normalizeToPickerOptions)(optionsProp);if(placeholder){return[{label:placeholder,value:placeholder}].concat((0,_toConsumableArray2.default)(normalizedOptions));}else{return normalizedOptions;}},[placeholder,optionsProp]);if(!placeholder&&options.length&&!value&&value!==options[0].value){_onValueChange==null||_onValueChange(options[0].value);}var renderNativePicker=function renderNativePicker(){return(0,_jsxRuntime.jsx)(_picker.Picker,{ref:pickerRef,testID:"native-picker-component",selectedValue:value,onValueChange:function onValueChange(newValue){if(newValue!==placeholder){_onValueChange==null||_onValueChange(newValue);}else if(newValue===placeholder){_onValueChange==null||_onValueChange("");}},style:styles.nativePicker,onBlur:function onBlur(){return setPickerVisible(false);},children:options.map(function(option){return(0,_jsxRuntime.jsx)(_picker.Picker.Item,{testID:"native-picker-item",label:option.label.toString(),value:option.value},option.value);})});};React.useEffect(function(){if(pickerVisible&&pickerRef.current){var _pickerRef$current;pickerRef==null||(_pickerRef$current=pickerRef.current)==null||_pickerRef$current.focus();}},[pickerVisible,pickerRef]);React.useEffect(function(){if(pickerVisible&&autoDismissKeyboard){_reactNative.Keyboard.dismiss();}},[pickerVisible,autoDismissKeyboard]);return(0,_jsxRuntime.jsx)(_PickerInputContainer.default,Object.assign({testID:"native-picker",Icon:Icon,placeholder:placeholder,selectedValue:value,options:options,onPress:function onPress(){return setPickerVisible(!pickerVisible);},disabled:disabled},rest,{children:(pickerVisible||isAndroid||isWeb)&&!disabled&&renderNativePicker()}));};var styles=_reactNative.StyleSheet.create({nativePicker:Object.assign({position:"absolute",bottom:0,left:0,right:0,flexDirection:"row",justifyContent:"center",width:"100%",backgroundColor:"white",opacity:0},_reactNative.Platform.select({web:{height:"100%"},android:{opacity:0}}))});var _default=exports.default=(0,_theme.withTheme)(NativePicker);
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StyleSheet, Keyboard } from "react-native";
|
|
3
|
+
import { SafeAreaView } from "react-native-safe-area-context";
|
|
4
|
+
import { Picker as NativePickerComponent } from "@react-native-picker/picker";
|
|
5
|
+
import Portal from "../Portal/Portal";
|
|
6
|
+
import { Button } from "../Button";
|
|
7
|
+
import { useDeepCompareMemo } from "../../utilities";
|
|
8
|
+
import { normalizeToPickerOptions, } from "./PickerCommon";
|
|
9
|
+
import PickerInputContainer from "./PickerInputContainer";
|
|
10
|
+
import { withTheme } from "@draftbit/theme";
|
|
11
|
+
const PortalPickerContent = ({ value, options, placeholder, onValueChange, onClose, Icon, theme, autoDismissKeyboard = true, }) => {
|
|
12
|
+
const pickerRef = React.useRef(null);
|
|
13
|
+
// Manage value state inside the Portal to avoid stale state issues across the Portal boundary
|
|
14
|
+
const [internalValue, setInternalValue] = React.useState(value);
|
|
15
|
+
React.useEffect(() => {
|
|
16
|
+
setInternalValue(value);
|
|
17
|
+
}, [value]);
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
if (autoDismissKeyboard) {
|
|
20
|
+
Keyboard.dismiss();
|
|
21
|
+
}
|
|
22
|
+
}, [autoDismissKeyboard]);
|
|
23
|
+
return (React.createElement(SafeAreaView, { style: [
|
|
24
|
+
styles.iosPickerContent,
|
|
25
|
+
{ backgroundColor: theme.colors.background.base },
|
|
26
|
+
] },
|
|
27
|
+
React.createElement(Button, { Icon: Icon, onPress: onClose, style: [styles.iosButton, { color: theme.colors.branding.primary }], title: "Close" }),
|
|
28
|
+
React.createElement(NativePickerComponent, { ref: pickerRef, testID: "native-picker-component", selectedValue: internalValue, onValueChange: (newValue) => {
|
|
29
|
+
setInternalValue(newValue);
|
|
30
|
+
if (newValue !== placeholder) {
|
|
31
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
|
|
32
|
+
}
|
|
33
|
+
else if (newValue === placeholder) {
|
|
34
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("");
|
|
35
|
+
}
|
|
36
|
+
}, style: [
|
|
37
|
+
styles.iosNativePicker,
|
|
38
|
+
{ backgroundColor: theme.colors.background.base },
|
|
39
|
+
], 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 }))))));
|
|
40
|
+
};
|
|
41
|
+
const NativePicker = ({ options: optionsProp = [], onValueChange, Icon, placeholder, value, autoDismissKeyboard = true, theme, disabled, ...rest }) => {
|
|
42
|
+
const [pickerVisible, setPickerVisible] = React.useState(false);
|
|
43
|
+
const options = useDeepCompareMemo(() => {
|
|
44
|
+
const normalizedOptions = normalizeToPickerOptions(optionsProp);
|
|
45
|
+
// Underlying Picker component defaults selection to first element when value is not provided (or undefined)
|
|
46
|
+
// Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
|
|
47
|
+
if (placeholder) {
|
|
48
|
+
return [{ label: placeholder, value: placeholder }, ...normalizedOptions];
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
return normalizedOptions;
|
|
52
|
+
}
|
|
53
|
+
}, [placeholder, optionsProp]);
|
|
54
|
+
// When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
|
|
55
|
+
if (!placeholder && options.length && !value && value !== options[0].value) {
|
|
56
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(options[0].value);
|
|
57
|
+
}
|
|
58
|
+
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,
|
|
59
|
+
React.createElement(PortalPickerContent, { value: value, options: options, placeholder: placeholder, onValueChange: onValueChange, onClose: () => setPickerVisible(false), Icon: Icon, theme: theme, autoDismissKeyboard: autoDismissKeyboard })))));
|
|
60
|
+
};
|
|
61
|
+
const styles = StyleSheet.create({
|
|
62
|
+
iosNativePicker: {
|
|
63
|
+
backgroundColor: "white",
|
|
64
|
+
},
|
|
65
|
+
iosPickerContent: {
|
|
66
|
+
width: "100%",
|
|
67
|
+
position: "absolute",
|
|
68
|
+
bottom: 0,
|
|
69
|
+
backgroundColor: "white",
|
|
70
|
+
},
|
|
71
|
+
iosButton: {
|
|
72
|
+
backgroundColor: "transparent",
|
|
73
|
+
borderWidth: 0,
|
|
74
|
+
},
|
|
75
|
+
});
|
|
76
|
+
export default withTheme(NativePicker);
|
|
77
|
+
//# sourceMappingURL=NativePicker.ios.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NativePicker.ios.js","sourceRoot":"","sources":["../../../../../src/components/Picker/NativePicker.ios.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { StyleSheet, Platform, Keyboard } from "react-native";
|
|
3
|
-
import { SafeAreaView } from "react-native-safe-area-context";
|
|
4
3
|
import { Picker as NativePickerComponent } from "@react-native-picker/picker";
|
|
5
|
-
import Portal from "../Portal/Portal";
|
|
6
|
-
import { Button } from "../Button";
|
|
7
4
|
import { useDeepCompareMemo } from "../../utilities";
|
|
8
5
|
import { normalizeToPickerOptions, } from "./PickerCommon";
|
|
9
6
|
import PickerInputContainer from "./PickerInputContainer";
|
|
10
7
|
import { withTheme } from "@draftbit/theme";
|
|
11
|
-
const isIos = Platform.OS === "ios";
|
|
12
8
|
const isAndroid = Platform.OS === "android";
|
|
13
9
|
const isWeb = Platform.OS === "web";
|
|
14
10
|
const NativePicker = ({ options: optionsProp = [], onValueChange, Icon, placeholder, value, autoDismissKeyboard = true, theme, disabled, ...rest }) => {
|
|
@@ -36,21 +32,7 @@ const NativePicker = ({ options: optionsProp = [], onValueChange, Icon, placehol
|
|
|
36
32
|
else if (newValue === placeholder) {
|
|
37
33
|
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("");
|
|
38
34
|
}
|
|
39
|
-
}, style:
|
|
40
|
-
const renderPicker = () => {
|
|
41
|
-
if (isIos) {
|
|
42
|
-
return (React.createElement(Portal, null,
|
|
43
|
-
React.createElement(SafeAreaView, { style: styles.iosPickerContent },
|
|
44
|
-
React.createElement(Button, { Icon: Icon, onPress: () => setPickerVisible(!pickerVisible), style: [
|
|
45
|
-
styles.iosButton,
|
|
46
|
-
{ color: theme.colors.branding.primary },
|
|
47
|
-
], title: "Close" }),
|
|
48
|
-
renderNativePicker())));
|
|
49
|
-
}
|
|
50
|
-
else {
|
|
51
|
-
return renderNativePicker();
|
|
52
|
-
}
|
|
53
|
-
};
|
|
35
|
+
}, 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 })))));
|
|
54
36
|
React.useEffect(() => {
|
|
55
37
|
var _a;
|
|
56
38
|
if (pickerVisible && pickerRef.current) {
|
|
@@ -62,7 +44,9 @@ const NativePicker = ({ options: optionsProp = [], onValueChange, Icon, placehol
|
|
|
62
44
|
Keyboard.dismiss();
|
|
63
45
|
}
|
|
64
46
|
}, [pickerVisible, autoDismissKeyboard]);
|
|
65
|
-
return (React.createElement(PickerInputContainer, { testID: "native-picker", Icon: Icon, placeholder: placeholder, selectedValue: value, options: options, onPress: () => setPickerVisible(!pickerVisible), disabled: disabled, ...rest }, (pickerVisible || isAndroid || isWeb) &&
|
|
47
|
+
return (React.createElement(PickerInputContainer, { testID: "native-picker", Icon: Icon, placeholder: placeholder, selectedValue: value, options: options, onPress: () => setPickerVisible(!pickerVisible), disabled: disabled, ...rest }, (pickerVisible || isAndroid || isWeb) &&
|
|
48
|
+
!disabled &&
|
|
49
|
+
renderNativePicker()));
|
|
66
50
|
};
|
|
67
51
|
const styles = StyleSheet.create({
|
|
68
52
|
nativePicker: {
|
|
@@ -77,26 +61,13 @@ const styles = StyleSheet.create({
|
|
|
77
61
|
opacity: 0,
|
|
78
62
|
...Platform.select({
|
|
79
63
|
web: {
|
|
80
|
-
height: "100%",
|
|
64
|
+
height: "100%",
|
|
81
65
|
},
|
|
82
66
|
android: {
|
|
83
|
-
opacity: 0,
|
|
67
|
+
opacity: 0,
|
|
84
68
|
},
|
|
85
69
|
}),
|
|
86
70
|
},
|
|
87
|
-
iosNativePicker: {
|
|
88
|
-
backgroundColor: "white",
|
|
89
|
-
},
|
|
90
|
-
iosPickerContent: {
|
|
91
|
-
width: "100%",
|
|
92
|
-
position: "absolute",
|
|
93
|
-
bottom: 0,
|
|
94
|
-
backgroundColor: "white",
|
|
95
|
-
},
|
|
96
|
-
iosButton: {
|
|
97
|
-
backgroundColor: "transparent",
|
|
98
|
-
borderWidth: 0,
|
|
99
|
-
},
|
|
100
71
|
});
|
|
101
72
|
export default withTheme(NativePicker);
|
|
102
73
|
//# sourceMappingURL=NativePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativePicker.js","sourceRoot":"","sources":["../../../../../src/components/Picker/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,
|
|
1
|
+
{"version":3,"file":"NativePicker.js","sourceRoot":"","sources":["../../../../../src/components/Picker/NativePicker.tsx"],"names":[],"mappings":"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"}
|