@draftbit/core 44.1.12-e30b54.2 → 44.1.13-2d7ff5.0

package/lib/module/components/Picker/PickerComponent.ios.js

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { View, StyleSheet, Dimensions } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+const {
+  width: deviceWidth,
+  height: deviceHeight
+} = Dimensions.get("screen");
+export const PickerComponent = _ref => {
+  let {
+    Icon,
+    togglePickerVisible,
+    pickerOptions,
+    internalValue,
+    handleValueChange
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
+    style: styles.iosPicker
+  }, /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: styles.iosSafeArea
+  }, /*#__PURE__*/React.createElement(Button, {
+    Icon: Icon,
+    type: "text",
+    onPress: togglePickerVisible,
+    style: styles.iosButton
+  }, "Close"), /*#__PURE__*/React.createElement(NativePicker, {
+    style: styles.iosNativePicker,
+    selectedValue: internalValue,
+    onValueChange: handleValueChange
+  }, pickerOptions.map(option => /*#__PURE__*/React.createElement(NativePicker.Item, {
+    label: option.label,
+    value: option.value,
+    key: option.value
+  }))))));
+};
+const styles = StyleSheet.create({
+  iosPicker: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    justifyContent: "center",
+    width: deviceWidth,
+    // TODO
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight,
+    backgroundColor: "green" // TODO
+    // backgroundColor: "rgba(255, 255, 255, 1)",
+
+  },
+  iosSafeArea: {
+    backgroundColor: "yellow",
+    // backgroundColor: "white",// TODO
+    flexDirection: "column",
+    width: deviceWidth,
+    maxWidth: deviceWidth
+  },
+  iosButton: {
+    alignSelf: "flex-end"
+  },
+  iosNativePicker: {
+    //backgroundColor: "white",// TODO
+    backgroundColor: "red"
+  }
+});
+//# sourceMappingURL=PickerComponent.ios.js.map

package/lib/module/components/Picker/PickerComponent.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PickerComponent.ios.tsx"],"names":["React","View","StyleSheet","Dimensions","SafeAreaView","Picker","NativePicker","Portal","Button","width","deviceWidth","height","deviceHeight","get","PickerComponent","Icon","togglePickerVisible","pickerOptions","internalValue","handleValueChange","styles","iosPicker","iosSafeArea","iosButton","iosNativePicker","map","option","label","value","create","position","bottom","left","right","flexDirection","justifyContent","maxWidth","maxHeight","backgroundColor","alignSelf"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,UAAf,EAA2BC,UAA3B,QAA6C,cAA7C;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,MAAM,IAAIC,YAAnB,QAAuC,6BAAvC;AAGA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,MAAP,MAAmB,qBAAnB;AAGA,MAAM;AAAEC,EAAAA,KAAK,EAAEC,WAAT;AAAsBC,EAAAA,MAAM,EAAEC;AAA9B,IAA+CT,UAAU,CAACU,GAAX,CAAe,QAAf,CAArD;AAWA,OAAO,MAAMC,eAA+C,GAAG,QAMzD;AAAA,MAN0D;AAC9DC,IAAAA,IAD8D;AAE9DC,IAAAA,mBAF8D;AAG9DC,IAAAA,aAH8D;AAI9DC,IAAAA,aAJ8D;AAK9DC,IAAAA;AAL8D,GAM1D;AACJ,sBACE,oBAAC,MAAD,qBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEC,MAAM,CAACC;AAApB,kBACE,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAED,MAAM,CAACE;AAA5B,kBACE,oBAAC,MAAD;AACE,IAAA,IAAI,EAAEP,IADR;AAEE,IAAA,IAAI,EAAC,MAFP;AAGE,IAAA,OAAO,EAAEC,mBAHX;AAIE,IAAA,KAAK,EAAEI,MAAM,CAACG;AAJhB,KAMG,OANH,CADF,eAUE,oBAAC,YAAD;AACE,IAAA,KAAK,EAAEH,MAAM,CAACI,eADhB;AAEE,IAAA,aAAa,EAAEN,aAFjB;AAGE,IAAA,aAAa,EAAEC;AAHjB,KAKIF,aAAD,CAA6CQ,GAA7C,CAAkDC,MAAD,iBAChD,oBAAC,YAAD,CAAc,IAAd;AACE,IAAA,KAAK,EAAEA,MAAM,CAACC,KADhB;AAEE,IAAA,KAAK,EAAED,MAAM,CAACE,KAFhB;AAGE,IAAA,GAAG,EAAEF,MAAM,CAACE;AAHd,IADD,CALH,CAVF,CADF,CADF,CADF;AA8BD,CArCM;AAuCP,MAAMR,MAAM,GAAGlB,UAAU,CAAC2B,MAAX,CAAkB;AAC/BR,EAAAA,SAAS,EAAE;AACTS,IAAAA,QAAQ,EAAE,UADD;AAETC,IAAAA,MAAM,EAAE,CAFC;AAGTC,IAAAA,IAAI,EAAE,CAHG;AAITC,IAAAA,KAAK,EAAE,CAJE;AAKTC,IAAAA,aAAa,EAAE,KALN;AAMTC,IAAAA,cAAc,EAAE,QANP;AAOT1B,IAAAA,KAAK,EAAEC,WAPE;AAOW;AACpB0B,IAAAA,QAAQ,EAAE1B,WARD;AAST2B,IAAAA,SAAS,EAAEzB,YATF;AAUT0B,IAAAA,eAAe,EAAE,OAVR,CAUiB;AAC1B;;AAXS,GADoB;AAc/BhB,EAAAA,WAAW,EAAE;AACXgB,IAAAA,eAAe,EAAE,QADN;AAEX;AACAJ,IAAAA,aAAa,EAAE,QAHJ;AAIXzB,IAAAA,KAAK,EAAEC,WAJI;AAKX0B,IAAAA,QAAQ,EAAE1B;AALC,GAdkB;AAqB/Ba,EAAAA,SAAS,EAAE;AACTgB,IAAAA,SAAS,EAAE;AADF,GArBoB;AAwB/Bf,EAAAA,eAAe,EAAE;AACf;AACAc,IAAAA,eAAe,EAAE;AAFF;AAxBc,CAAlB,CAAf","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet, Dimensions } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\nimport Portal from \"../Portal/Portal\";\nimport Button from \"../DeprecatedButton\";\nimport { PickerOption } from \"./Picker\";\n\nconst { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n  Icon: IconSlot[\"Icon\"];\n  androidPickerRef: React.RefObject<any>;\n  togglePickerVisible: () => void;\n  pickerOptions: PickerOption[];\n  internalValue: string | undefined;\n  handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = ({\n  Icon,\n  togglePickerVisible,\n  pickerOptions,\n  internalValue,\n  handleValueChange,\n}) => {\n  return (\n    <Portal>\n      <View style={styles.iosPicker}>\n        <SafeAreaView style={styles.iosSafeArea}>\n          <Button\n            Icon={Icon}\n            type=\"text\"\n            onPress={togglePickerVisible}\n            style={styles.iosButton}\n          >\n            {\"Close\"}\n          </Button>\n\n          <NativePicker\n            style={styles.iosNativePicker}\n            selectedValue={internalValue}\n            onValueChange={handleValueChange}\n          >\n            {(pickerOptions as unknown as PickerOption[]).map((option) => (\n              <NativePicker.Item\n                label={option.label}\n                value={option.value}\n                key={option.value}\n              />\n            ))}\n          </NativePicker>\n        </SafeAreaView>\n      </View>\n    </Portal>\n  );\n};\n\nconst styles = StyleSheet.create({\n  iosPicker: {\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    flexDirection: \"row\",\n    justifyContent: \"center\",\n    width: deviceWidth, // TODO\n    maxWidth: deviceWidth,\n    maxHeight: deviceHeight,\n    backgroundColor: \"green\", // TODO\n    // backgroundColor: \"rgba(255, 255, 255, 1)\",\n  },\n  iosSafeArea: {\n    backgroundColor: \"yellow\",\n    // backgroundColor: \"white\",// TODO\n    flexDirection: \"column\",\n    width: deviceWidth,\n    maxWidth: deviceWidth,\n  },\n  iosButton: {\n    alignSelf: \"flex-end\",\n  },\n  iosNativePicker: {\n    //backgroundColor: \"white\",// TODO\n    backgroundColor: \"red\",\n  },\n});\n"]}

package/lib/module/components/Picker/PickerComponent.web.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { StyleSheet, Dimensions } from "react-native";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+const {
+  width: deviceWidth,
+  height: deviceHeight
+} = Dimensions.get("screen");
+export const PickerComponent = _ref => {
+  let {
+    androidPickerRef,
+    togglePickerVisible,
+    pickerOptions,
+    internalValue,
+    handleValueChange
+  } = _ref;
+  return /*#__PURE__*/React.createElement(NativePicker, {
+    selectedValue: internalValue,
+    onValueChange: handleValueChange,
+    style: styles.nonIosPicker,
+    ref: androidPickerRef,
+    onBlur: togglePickerVisible
+  }, pickerOptions.map(option => /*#__PURE__*/React.createElement(NativePicker.Item, {
+    label: option.label,
+    value: option.value,
+    key: option.value
+  })));
+};
+const styles = StyleSheet.create({
+  nonIosPicker: {
+    opacity: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight
+  }
+});
+//# sourceMappingURL=PickerComponent.web.js.map

package/lib/module/components/Picker/PickerComponent.web.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PickerComponent.web.tsx"],"names":["React","StyleSheet","Dimensions","Picker","NativePicker","width","deviceWidth","height","deviceHeight","get","PickerComponent","androidPickerRef","togglePickerVisible","pickerOptions","internalValue","handleValueChange","styles","nonIosPicker","map","option","label","value","create","opacity","position","top","left","right","bottom","maxWidth","maxHeight"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT,EAAqBC,UAArB,QAAuC,cAAvC;AAEA,SAASC,MAAM,IAAIC,YAAnB,QAAuC,6BAAvC;AAMA,MAAM;AAAEC,EAAAA,KAAK,EAAEC,WAAT;AAAsBC,EAAAA,MAAM,EAAEC;AAA9B,IAA+CN,UAAU,CAACO,GAAX,CAAe,QAAf,CAArD;AAWA,OAAO,MAAMC,eAA+C,GAAG,QAMzD;AAAA,MAN0D;AAC9DC,IAAAA,gBAD8D;AAE9DC,IAAAA,mBAF8D;AAG9DC,IAAAA,aAH8D;AAI9DC,IAAAA,aAJ8D;AAK9DC,IAAAA;AAL8D,GAM1D;AACJ,sBACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAED,aADjB;AAEE,IAAA,aAAa,EAAEC,iBAFjB;AAGE,IAAA,KAAK,EAAEC,MAAM,CAACC,YAHhB;AAIE,IAAA,GAAG,EAAEN,gBAJP;AAKE,IAAA,MAAM,EAAEC;AALV,KAOIC,aAAD,CAA6CK,GAA7C,CAAkDC,MAAD,iBAChD,oBAAC,YAAD,CAAc,IAAd;AACE,IAAA,KAAK,EAAEA,MAAM,CAACC,KADhB;AAEE,IAAA,KAAK,EAAED,MAAM,CAACE,KAFhB;AAGE,IAAA,GAAG,EAAEF,MAAM,CAACE;AAHd,IADD,CAPH,CADF;AAiBD,CAxBM;AA0BP,MAAML,MAAM,GAAGf,UAAU,CAACqB,MAAX,CAAkB;AAC/BL,EAAAA,YAAY,EAAE;AACZM,IAAAA,OAAO,EAAE,CADG;AAEZC,IAAAA,QAAQ,EAAE,UAFE;AAGZC,IAAAA,GAAG,EAAE,CAHO;AAIZC,IAAAA,IAAI,EAAE,CAJM;AAKZC,IAAAA,KAAK,EAAE,CALK;AAMZC,IAAAA,MAAM,EAAE,CANI;AAOZvB,IAAAA,KAAK,EAAE,MAPK;AAQZwB,IAAAA,QAAQ,EAAEvB,WARE;AASZwB,IAAAA,SAAS,EAAEtB;AATC;AADiB,CAAlB,CAAf","sourcesContent":["import * as React from \"react\";\nimport { StyleSheet, Dimensions } from \"react-native\";\n\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nimport { PickerOption } from \"./Picker\";\n\nconst { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n  Icon: IconSlot[\"Icon\"];\n  androidPickerRef: React.RefObject<any>;\n  togglePickerVisible: () => void;\n  pickerOptions: PickerOption[];\n  internalValue: string | undefined;\n  handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = ({\n  androidPickerRef,\n  togglePickerVisible,\n  pickerOptions,\n  internalValue,\n  handleValueChange,\n}) => {\n  return (\n    <NativePicker\n      selectedValue={internalValue}\n      onValueChange={handleValueChange}\n      style={styles.nonIosPicker}\n      ref={androidPickerRef}\n      onBlur={togglePickerVisible}\n    >\n      {(pickerOptions as unknown as PickerOption[]).map((option) => (\n        <NativePicker.Item\n          label={option.label}\n          value={option.value}\n          key={option.value}\n        />\n      ))}\n    </NativePicker>\n  );\n};\n\nconst styles = StyleSheet.create({\n  nonIosPicker: {\n    opacity: 0,\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    width: \"100%\",\n    maxWidth: deviceWidth,\n    maxHeight: deviceHeight,\n  },\n});\n"]}

package/lib/module/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["constants.js"],"names":["Platform","expo","global","__expo","DEFAULT_STATUSBAR_HEIGHT_EXPO","Constants","statusBarHeight","APPROX_STATUSBAR_HEIGHT","select","android","ios","Version"],"mappings":"AAAA,SAASA,QAAT,QAAyB,cAAzB,C,CACA;;AACA,MAAMC,IAAI,GAAGC,MAAM,CAACC,MAApB;AACA,MAAMC,6BAA6B,GAAGH,IAAI,SAAJ,IAAAA,IAAI,WAAJ,IAAAA,IAAI,CAAEI,SAAN,GAChCJ,IAAI,CAACI,SAAL,CAAeC,eADiB,GAEhC,CAFN;AAGA,OAAO,MAAMC,uBAAuB,GAAGP,QAAQ,CAACQ,MAAT,CAAgB;AACnDC,EAAAA,OAAO,EAAEL,6BAD0C;AAEnDM,EAAAA,GAAG,EAAEV,QAAQ,CAACW,OAAT,GAAmB,EAAnB,GAAwBP,6BAAxB,GAAwD;AAFV,CAAhB,CAAhC","sourcesContent":["import { Platform } from \"react-native\";\n// @ts-ignore\nconst expo = global.__expo;\nconst DEFAULT_STATUSBAR_HEIGHT_EXPO = expo?.Constants\n    ? expo.Constants.statusBarHeight\n    : 0;\nexport const APPROX_STATUSBAR_HEIGHT = Platform.select({\n    android: DEFAULT_STATUSBAR_HEIGHT_EXPO,\n    ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0,\n});\n"]}
+{"version":3,"sources":["constants.ts"],"names":["Platform","expo","global","__expo","DEFAULT_STATUSBAR_HEIGHT_EXPO","Constants","statusBarHeight","APPROX_STATUSBAR_HEIGHT","select","android","ios","Version"],"mappings":"AAAA,SAASA,QAAT,QAAyB,cAAzB,C,CAEA;;AACA,MAAMC,IAAI,GAAGC,MAAM,CAACC,MAApB;AAEA,MAAMC,6BAA6B,GAAGH,IAAI,SAAJ,IAAAA,IAAI,WAAJ,IAAAA,IAAI,CAAEI,SAAN,GAClCJ,IAAI,CAACI,SAAL,CAAeC,eADmB,GAElC,CAFJ;AAIA,OAAO,MAAMC,uBAAuB,GAAGP,QAAQ,CAACQ,MAAT,CAAgB;AACrDC,EAAAA,OAAO,EAAEL,6BAD4C;AAErDM,EAAAA,GAAG,EAAEV,QAAQ,CAACW,OAAT,GAAmB,EAAnB,GAAwBP,6BAAxB,GAAwD;AAFR,CAAhB,CAAhC","sourcesContent":["import { Platform } from \"react-native\";\n\n// @ts-ignore\nconst expo = global.__expo;\n\nconst DEFAULT_STATUSBAR_HEIGHT_EXPO = expo?.Constants\n  ? expo.Constants.statusBarHeight\n  : 0;\n\nexport const APPROX_STATUSBAR_HEIGHT = Platform.select({\n  android: DEFAULT_STATUSBAR_HEIGHT_EXPO,\n  ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0,\n});\n"]}

package/lib/module/mappings/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Banner.js"],"names":["COMPONENT_TYPES","createIconProp","createBoolProp","createColorProp","createTextProp","GROUPS","SEED_DATA","name","tag","category","button","props","icon","defaultValue","required","content","label","description","initiallyVisible","group","basic","dismissable","buttonColor"],"mappings":"AAAA,SAASA,eAAT,EAA0BC,cAA1B,EAA0CC,cAA1C,EAA0DC,eAA1D,EAA2EC,cAA3E,EAA2FC,MAA3F,QAA0G,iBAA1G;AACA,OAAO,MAAMC,SAAS,GAAG;AACrBC,EAAAA,IAAI,EAAE,QADe;AAErBC,EAAAA,GAAG,EAAE,QAFgB;AAGrBC,EAAAA,QAAQ,EAAET,eAAe,CAACU,MAHL;AAIrBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,IAAI,EAAEX,cAAc,CAAC;AACjBY,MAAAA,YAAY,EAAE,IADG;AAEjBC,MAAAA,QAAQ,EAAE;AAFO,KAAD,CADjB;AAKHC,IAAAA,OAAO,EAAEX,cAAc,CAAC;AACpBY,MAAAA,KAAK,EAAE,SADa;AAEpBC,MAAAA,WAAW,EAAE;AAFO,KAAD,CALpB;AASHC,IAAAA,gBAAgB,EAAEhB,cAAc,CAAC;AAC7BiB,MAAAA,KAAK,EAAEd,MAAM,CAACe,KADe;AAE7BJ,MAAAA,KAAK,EAAE,mBAFsB;AAG7BC,MAAAA,WAAW,EAAE,sCAHgB;AAI7BJ,MAAAA,YAAY,EAAE;AAJe,KAAD,CAT7B;AAeHQ,IAAAA,WAAW,EAAEnB,cAAc,CAAC;AACxBiB,MAAAA,KAAK,EAAEd,MAAM,CAACe,KADU;AAExBJ,MAAAA,KAAK,EAAE,aAFiB;AAGxBC,MAAAA,WAAW,EAAE,gDAHW;AAIxBJ,MAAAA,YAAY,EAAE;AAJU,KAAD,CAfxB;AAqBHS,IAAAA,WAAW,EAAEnB,eAAe,CAAC;AACzBa,MAAAA,KAAK,EAAE,cADkB;AAEzBH,MAAAA,YAAY,EAAE;AAFW,KAAD;AArBzB;AAJc,CAAlB","sourcesContent":["import { COMPONENT_TYPES, createIconProp, createBoolProp, createColorProp, createTextProp, GROUPS, } from \"@draftbit/types\";\nexport const SEED_DATA = {\n    name: \"Banner\",\n    tag: \"Banner\",\n    category: COMPONENT_TYPES.button,\n    props: {\n        icon: createIconProp({\n            defaultValue: null,\n            required: false,\n        }),\n        content: createTextProp({\n            label: \"Content\",\n            description: \"Banner text content\",\n        }),\n        initiallyVisible: createBoolProp({\n            group: GROUPS.basic,\n            label: \"Initially visible\",\n            description: \"Whether the banner should be visible\",\n            defaultValue: true,\n        }),\n        dismissable: createBoolProp({\n            group: GROUPS.basic,\n            label: \"Dismissable\",\n            description: \"Whether the banner should be able to be closed\",\n            defaultValue: true,\n        }),\n        buttonColor: createColorProp({\n            label: \"Button color\",\n            defaultValue: \"primary\",\n        }),\n    },\n};\n"]}
+{"version":3,"sources":["Banner.ts"],"names":["COMPONENT_TYPES","createIconProp","createBoolProp","createColorProp","createTextProp","GROUPS","SEED_DATA","name","tag","category","button","props","icon","defaultValue","required","content","label","description","initiallyVisible","group","basic","dismissable","buttonColor"],"mappings":"AAAA,SACEA,eADF,EAEEC,cAFF,EAGEC,cAHF,EAIEC,eAJF,EAKEC,cALF,EAMEC,MANF,QAOO,iBAPP;AASA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,QADiB;AAEvBC,EAAAA,GAAG,EAAE,QAFkB;AAGvBC,EAAAA,QAAQ,EAAET,eAAe,CAACU,MAHH;AAIvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAEX,cAAc,CAAC;AACnBY,MAAAA,YAAY,EAAE,IADK;AAEnBC,MAAAA,QAAQ,EAAE;AAFS,KAAD,CADf;AAKLC,IAAAA,OAAO,EAAEX,cAAc,CAAC;AACtBY,MAAAA,KAAK,EAAE,SADe;AAEtBC,MAAAA,WAAW,EAAE;AAFS,KAAD,CALlB;AASLC,IAAAA,gBAAgB,EAAEhB,cAAc,CAAC;AAC/BiB,MAAAA,KAAK,EAAEd,MAAM,CAACe,KADiB;AAE/BJ,MAAAA,KAAK,EAAE,mBAFwB;AAG/BC,MAAAA,WAAW,EAAE,sCAHkB;AAI/BJ,MAAAA,YAAY,EAAE;AAJiB,KAAD,CAT3B;AAeLQ,IAAAA,WAAW,EAAEnB,cAAc,CAAC;AAC1BiB,MAAAA,KAAK,EAAEd,MAAM,CAACe,KADY;AAE1BJ,MAAAA,KAAK,EAAE,aAFmB;AAG1BC,MAAAA,WAAW,EAAE,gDAHa;AAI1BJ,MAAAA,YAAY,EAAE;AAJY,KAAD,CAftB;AAqBLS,IAAAA,WAAW,EAAEnB,eAAe,CAAC;AAC3Ba,MAAAA,KAAK,EAAE,cADoB;AAE3BH,MAAAA,YAAY,EAAE;AAFa,KAAD;AArBvB;AAJgB,CAAlB","sourcesContent":["import {\n  COMPONENT_TYPES,\n  createIconProp,\n  createBoolProp,\n  createColorProp,\n  createTextProp,\n  GROUPS,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Banner\",\n  tag: \"Banner\",\n  category: COMPONENT_TYPES.button,\n  props: {\n    icon: createIconProp({\n      defaultValue: null,\n      required: false,\n    }),\n    content: createTextProp({\n      label: \"Content\",\n      description: \"Banner text content\",\n    }),\n    initiallyVisible: createBoolProp({\n      group: GROUPS.basic,\n      label: \"Initially visible\",\n      description: \"Whether the banner should be visible\",\n      defaultValue: true,\n    }),\n    dismissable: createBoolProp({\n      group: GROUPS.basic,\n      label: \"Dismissable\",\n      description: \"Whether the banner should be able to be closed\",\n      defaultValue: true,\n    }),\n    buttonColor: createColorProp({\n      label: \"Button color\",\n      defaultValue: \"primary\",\n    }),\n  },\n};\n"]}

package/lib/module/mappings/KeyboardAwareScrollView.js

@@ -40,7 +40,7 @@ export const SEED_DATA = {
       defaultValue: true
     }),
     keyboardShouldPersistTaps: createTextEnumProp({
-      label: "Allow Touch Events With Open Keyboard",
+      label: "Allow Touch Events",
       description: "Allows touch events on visible components to be processed while the keyboard is open",
       defaultValue: "never",
       options: ["never", "always"]

package/lib/module/mappings/KeyboardAwareScrollView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["KeyboardAwareScrollView.ts"],"names":["COMPONENT_TYPES","createStaticBoolProp","createStaticNumberProp","createTextEnumProp","SEED_DATA","name","tag","description","category","layout","props","viewIsInsideTabBar","label","enableAutomaticScroll","extraHeight","extraScrollHeight","enableResetScrollToCoords","keyboardOpeningTime","enableOnAndroid","showsVerticalScrollIndicator","defaultValue","keyboardShouldPersistTaps","options"],"mappings":"AAAA,SACEA,eADF,EAEEC,oBAFF,EAGEC,sBAHF,EAIEC,kBAJF,QAKO,iBALP;AAOA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,4BADiB;AAEvBC,EAAAA,GAAG,EAAE,yBAFkB;AAGvBC,EAAAA,WAAW,EACT,mEAJqB;AAKvBC,EAAAA,QAAQ,EAAER,eAAe,CAACS,MALH;AAMvBA,EAAAA,MAAM,EAAE,EANe;AAOvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,kBAAkB,EAAEV,oBAAoB,CAAC;AACvCW,MAAAA,KAAK,EAAE,uBADgC;AAEvCL,MAAAA,WAAW,EAAE;AAF0B,KAAD,CADnC;AAKLM,IAAAA,qBAAqB,EAAEZ,oBAAoB,CAAC;AAC1CW,MAAAA,KAAK,EAAE,yBADmC;AAE1CL,MAAAA,WAAW,EACT;AAHwC,KAAD,CALtC;AAULO,IAAAA,WAAW,EAAEZ,sBAAsB,CAAC;AAClCU,MAAAA,KAAK,EAAE,cAD2B;AAElCL,MAAAA,WAAW,EAAE;AAFqB,KAAD,CAV9B;AAcLQ,IAAAA,iBAAiB,EAAEb,sBAAsB,CAAC;AACxCU,MAAAA,KAAK,EAAE,qBADiC;AAExCL,MAAAA,WAAW,EACT;AAHsC,KAAD,CAdpC;AAmBLS,IAAAA,yBAAyB,EAAEf,oBAAoB,CAAC;AAC9CW,MAAAA,KAAK,EAAE,oCADuC;AAE9CL,MAAAA,WAAW,EACT;AAH4C,KAAD,CAnB1C;AAwBLU,IAAAA,mBAAmB,EAAEf,sBAAsB,CAAC;AAC1CU,MAAAA,KAAK,EAAE,cADmC;AAE1CL,MAAAA,WAAW,EACT;AAHwC,KAAD,CAxBtC;AA6BLW,IAAAA,eAAe,EAAEjB,oBAAoB,CAAC;AACpCW,MAAAA,KAAK,EAAE,mBAD6B;AAEpCL,MAAAA,WAAW,EAAE;AAFuB,KAAD,CA7BhC;AAiCLY,IAAAA,4BAA4B,EAAElB,oBAAoB,CAAC;AACjDW,MAAAA,KAAK,EAAE,iCAD0C;AAEjDL,MAAAA,WAAW,EAAE,4CAFoC;AAGjDa,MAAAA,YAAY,EAAE;AAHmC,KAAD,CAjC7C;AAsCLC,IAAAA,yBAAyB,EAAElB,kBAAkB,CAAC;AAC5CS,MAAAA,KAAK,EAAE,uCADqC;AAE5CL,MAAAA,WAAW,EACT,sFAH0C;AAI5Ca,MAAAA,YAAY,EAAE,OAJ8B;AAK5CE,MAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,QAAV;AALmC,KAAD;AAtCxC;AAPgB,CAAlB","sourcesContent":["import {\n  COMPONENT_TYPES,\n  createStaticBoolProp,\n  createStaticNumberProp,\n  createTextEnumProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Keyboard Aware Scroll View\",\n  tag: \"KeyboardAwareScrollView\",\n  description:\n    \"View that moves pushes the content when virtual keyboard is open.\",\n  category: COMPONENT_TYPES.layout,\n  layout: {},\n  props: {\n    viewIsInsideTabBar: createStaticBoolProp({\n      label: \"View Is Inside TabBar\",\n      description: \"Adds an extra offset that represents the TabBarIOS height.\",\n    }),\n    enableAutomaticScroll: createStaticBoolProp({\n      label: \"Enable Automatic Scroll\",\n      description:\n        \"When focus in TextInput will scroll the position, default is enabled\",\n    }),\n    extraHeight: createStaticNumberProp({\n      label: \"Extra Height\",\n      description: \"Adds an extra offset when focusing the TextInputs\",\n    }),\n    extraScrollHeight: createStaticNumberProp({\n      label: \"Extra Scroll Height\",\n      description:\n        \"Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard\",\n    }),\n    enableResetScrollToCoords: createStaticBoolProp({\n      label: \"Enable Reset Scroll To Coordinates\",\n      description:\n        \"Lets the user enable or disable automatic resetScrollToCoords\",\n    }),\n    keyboardOpeningTime: createStaticNumberProp({\n      label: \"Opening Time\",\n      description:\n        \"Sets the delay time before scrolling to new position after keyboard opening, default is 250\",\n    }),\n    enableOnAndroid: createStaticBoolProp({\n      label: \"Enable On Android\",\n      description: \"Enable Android Support\",\n    }),\n    showsVerticalScrollIndicator: createStaticBoolProp({\n      label: \"Shows Vertical Scroll Indicator\",\n      description: \"Show or hide the vertical scroll indicator\",\n      defaultValue: true,\n    }),\n    keyboardShouldPersistTaps: createTextEnumProp({\n      label: \"Allow Touch Events With Open Keyboard\",\n      description:\n        \"Allows touch events on visible components to be processed while the keyboard is open\",\n      defaultValue: \"never\",\n      options: [\"never\", \"always\"],\n    }),\n  },\n};\n"]}
+{"version":3,"sources":["KeyboardAwareScrollView.ts"],"names":["COMPONENT_TYPES","createStaticBoolProp","createStaticNumberProp","createTextEnumProp","SEED_DATA","name","tag","description","category","layout","props","viewIsInsideTabBar","label","enableAutomaticScroll","extraHeight","extraScrollHeight","enableResetScrollToCoords","keyboardOpeningTime","enableOnAndroid","showsVerticalScrollIndicator","defaultValue","keyboardShouldPersistTaps","options"],"mappings":"AAAA,SACEA,eADF,EAEEC,oBAFF,EAGEC,sBAHF,EAIEC,kBAJF,QAKO,iBALP;AAOA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,4BADiB;AAEvBC,EAAAA,GAAG,EAAE,yBAFkB;AAGvBC,EAAAA,WAAW,EACT,mEAJqB;AAKvBC,EAAAA,QAAQ,EAAER,eAAe,CAACS,MALH;AAMvBA,EAAAA,MAAM,EAAE,EANe;AAOvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,kBAAkB,EAAEV,oBAAoB,CAAC;AACvCW,MAAAA,KAAK,EAAE,uBADgC;AAEvCL,MAAAA,WAAW,EAAE;AAF0B,KAAD,CADnC;AAKLM,IAAAA,qBAAqB,EAAEZ,oBAAoB,CAAC;AAC1CW,MAAAA,KAAK,EAAE,yBADmC;AAE1CL,MAAAA,WAAW,EACT;AAHwC,KAAD,CALtC;AAULO,IAAAA,WAAW,EAAEZ,sBAAsB,CAAC;AAClCU,MAAAA,KAAK,EAAE,cAD2B;AAElCL,MAAAA,WAAW,EAAE;AAFqB,KAAD,CAV9B;AAcLQ,IAAAA,iBAAiB,EAAEb,sBAAsB,CAAC;AACxCU,MAAAA,KAAK,EAAE,qBADiC;AAExCL,MAAAA,WAAW,EACT;AAHsC,KAAD,CAdpC;AAmBLS,IAAAA,yBAAyB,EAAEf,oBAAoB,CAAC;AAC9CW,MAAAA,KAAK,EAAE,oCADuC;AAE9CL,MAAAA,WAAW,EACT;AAH4C,KAAD,CAnB1C;AAwBLU,IAAAA,mBAAmB,EAAEf,sBAAsB,CAAC;AAC1CU,MAAAA,KAAK,EAAE,cADmC;AAE1CL,MAAAA,WAAW,EACT;AAHwC,KAAD,CAxBtC;AA6BLW,IAAAA,eAAe,EAAEjB,oBAAoB,CAAC;AACpCW,MAAAA,KAAK,EAAE,mBAD6B;AAEpCL,MAAAA,WAAW,EAAE;AAFuB,KAAD,CA7BhC;AAiCLY,IAAAA,4BAA4B,EAAElB,oBAAoB,CAAC;AACjDW,MAAAA,KAAK,EAAE,iCAD0C;AAEjDL,MAAAA,WAAW,EAAE,4CAFoC;AAGjDa,MAAAA,YAAY,EAAE;AAHmC,KAAD,CAjC7C;AAsCLC,IAAAA,yBAAyB,EAAElB,kBAAkB,CAAC;AAC5CS,MAAAA,KAAK,EAAE,oBADqC;AAE5CL,MAAAA,WAAW,EACT,sFAH0C;AAI5Ca,MAAAA,YAAY,EAAE,OAJ8B;AAK5CE,MAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,QAAV;AALmC,KAAD;AAtCxC;AAPgB,CAAlB","sourcesContent":["import {\n  COMPONENT_TYPES,\n  createStaticBoolProp,\n  createStaticNumberProp,\n  createTextEnumProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Keyboard Aware Scroll View\",\n  tag: \"KeyboardAwareScrollView\",\n  description:\n    \"View that moves pushes the content when virtual keyboard is open.\",\n  category: COMPONENT_TYPES.layout,\n  layout: {},\n  props: {\n    viewIsInsideTabBar: createStaticBoolProp({\n      label: \"View Is Inside TabBar\",\n      description: \"Adds an extra offset that represents the TabBarIOS height.\",\n    }),\n    enableAutomaticScroll: createStaticBoolProp({\n      label: \"Enable Automatic Scroll\",\n      description:\n        \"When focus in TextInput will scroll the position, default is enabled\",\n    }),\n    extraHeight: createStaticNumberProp({\n      label: \"Extra Height\",\n      description: \"Adds an extra offset when focusing the TextInputs\",\n    }),\n    extraScrollHeight: createStaticNumberProp({\n      label: \"Extra Scroll Height\",\n      description:\n        \"Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard\",\n    }),\n    enableResetScrollToCoords: createStaticBoolProp({\n      label: \"Enable Reset Scroll To Coordinates\",\n      description:\n        \"Lets the user enable or disable automatic resetScrollToCoords\",\n    }),\n    keyboardOpeningTime: createStaticNumberProp({\n      label: \"Opening Time\",\n      description:\n        \"Sets the delay time before scrolling to new position after keyboard opening, default is 250\",\n    }),\n    enableOnAndroid: createStaticBoolProp({\n      label: \"Enable On Android\",\n      description: \"Enable Android Support\",\n    }),\n    showsVerticalScrollIndicator: createStaticBoolProp({\n      label: \"Shows Vertical Scroll Indicator\",\n      description: \"Show or hide the vertical scroll indicator\",\n      defaultValue: true,\n    }),\n    keyboardShouldPersistTaps: createTextEnumProp({\n      label: \"Allow Touch Events\",\n      description:\n        \"Allows touch events on visible components to be processed while the keyboard is open\",\n      defaultValue: \"never\",\n      options: [\"never\", \"always\"],\n    }),\n  },\n};\n"]}

package/lib/typescript/src/components/Picker/PickerComponent.android.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { IconSlot } from "../../interfaces/Icon";
+import { PickerOption } from "./Picker";
+interface PickerComponentProps {
+    Icon: IconSlot["Icon"];
+    androidPickerRef: React.RefObject<any>;
+    togglePickerVisible: () => void;
+    pickerOptions: PickerOption[];
+    internalValue: string | undefined;
+    handleValueChange: (newValue: string, itemIndex: number) => void;
+}
+export declare const PickerComponent: React.FC<PickerComponentProps>;
+export {};

package/lib/typescript/src/components/Picker/PickerComponent.ios.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { IconSlot } from "../../interfaces/Icon";
+import { PickerOption } from "./Picker";
+interface PickerComponentProps {
+    Icon: IconSlot["Icon"];
+    androidPickerRef: React.RefObject<any>;
+    togglePickerVisible: () => void;
+    pickerOptions: PickerOption[];
+    internalValue: string | undefined;
+    handleValueChange: (newValue: string, itemIndex: number) => void;
+}
+export declare const PickerComponent: React.FC<PickerComponentProps>;
+export {};

package/lib/typescript/src/components/Picker/PickerComponent.web.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { IconSlot } from "../../interfaces/Icon";
+import { PickerOption } from "./Picker";
+interface PickerComponentProps {
+    Icon: IconSlot["Icon"];
+    androidPickerRef: React.RefObject<any>;
+    togglePickerVisible: () => void;
+    pickerOptions: PickerOption[];
+    internalValue: string | undefined;
+    handleValueChange: (newValue: string, itemIndex: number) => void;
+}
+export declare const PickerComponent: React.FC<PickerComponentProps>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "44.1.12-e30b54.2+e30b54e2",
+  "version": "44.1.13-2d7ff5.0+2d7ff57c",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^44.1.0",
+    "@draftbit/types": "^44.1.12",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.1.7",
@@ -79,5 +79,5 @@
       ]
     ]
   },
-  "gitHead": "e30b54e2d55a9f41d4bea379909a03f1e53c88cc"
+  "gitHead": "2d7ff57cc3d8150283dcf65307dc6206b77ec077"
 }

package/src/components/Picker/Picker.js

@@ -1,13 +1,15 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, } from "react-native";
+import { View, StyleSheet, Text, 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 { 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 Portal from "../Portal/Portal";
+// import Button from "../DeprecatedButton";
 import Touchable from "../Touchable";
 import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames, } from "../../utilities";
+// @ts-expect-error
+import { PickerComponent } from "./PickerComponent";
 function normalizeOptions(options) {
     if (options.length === 0) {
         return [];
@@ -30,12 +32,20 @@ function normalizeOptions(options) {
     }
     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", }) => {
+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", }) => {
+    const androidPickerRef = React.useRef(undefined);
     const [internalValue, setInternalValue] = React.useState(value || defaultValue);
-    const [pickerVisible, togglePickerVisible] = React.useReducer((state) => !state, false);
+    const [pickerVisible, setPickerVisible] = React.useState(false);
+    const togglePickerVisible = () => {
+        setPickerVisible(!pickerVisible);
+    };
     React.useEffect(() => {
         if (value != null) {
             setInternalValue(value);
@@ -46,11 +56,16 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
             setInternalValue(defaultValue);
         }
     }, [defaultValue]);
+    React.useEffect(() => {
+        if (pickerVisible && androidPickerRef.current) {
+            androidPickerRef?.current?.focus();
+        }
+    }, [pickerVisible, androidPickerRef]);
     const normalizedOptions = normalizeOptions(options);
     const pickerOptions = placeholder
         ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
         : normalizedOptions;
-    const { colors } = theme;
+    // const { colors } = theme;
     const { viewStyles, textStyles } = extractStyles(style);
     const additionalBorderStyles = ["backgroundColor"];
     const additionalMarginStyles = [
@@ -96,7 +111,6 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
         height: 60,
         ...extractedMarginStyles,
     };
-    const platform = Platform.OS;
     const stylesWithoutBordersAndMargins = omit(viewStyles, [
         ...borderStyleNames,
         ...marginStyleNames,
@@ -171,23 +185,22 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
                         React.createElement(Text, { style: primaryTextStyle }, String(selectedLabel ?? placeholder))),
                     rightIcon)),
             assistiveTextLabel),
-        platform === "ios" && 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,
-        platform !== "ios" ? (React.createElement(NativePicker, { enabled: !disabled, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
+        React.createElement(View, null, pickerVisible ? (React.createElement(PickerComponent, { ...{
+                Icon,
+                androidPickerRef,
+                togglePickerVisible,
+                pickerOptions,
+                internalValue,
+                handleValueChange,
+            } })) : null)));
 };
 export default withTheme(Picker);
 const styles = StyleSheet.create({
     marginsContainer: {
         alignSelf: "stretch",
         alignItems: "center",
+        width: "100%",
+        maxWidth: deviceWidth,
     },
     touchableContainer: {
         flex: 1,
@@ -195,6 +208,7 @@ const styles = StyleSheet.create({
         width: "100%",
         alignSelf: "stretch",
         alignItems: "center",
+        backgroundColor: "pink", // TODO
     },
     outsetContainer: {
         flex: 1,
@@ -224,11 +238,15 @@ const styles = StyleSheet.create({
         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",
@@ -244,5 +262,7 @@ const styles = StyleSheet.create({
         right: 0,
         bottom: 0,
         width: "100%",
+        maxWidth: deviceWidth,
+        maxHeight: deviceHeight,
     },
 });

package/src/components/Picker/Picker.tsx

@@ -3,17 +3,18 @@ import {
   View,
   StyleSheet,
   Text,
-  Platform,
+  // Platform,
   ViewStyle,
   StyleProp,
+  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 { 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 Portal from "../Portal/Portal";
+// import Button from "../DeprecatedButton";
 import Touchable from "../Touchable";
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
@@ -23,6 +24,8 @@ import {
   borderStyleNames,
   marginStyleNames,
 } from "../../utilities";
+// @ts-expect-error
+import { PickerComponent } from "./PickerComponent";
 
 export interface PickerOption {
   value: string;
@@ -81,6 +84,8 @@ function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
   );
 }
 
+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)";
@@ -95,7 +100,7 @@ const Picker: React.FC<PickerProps> = ({
   placeholder,
   value,
   disabled = false,
-  theme,
+  // theme,
   assistiveText,
   label,
   iconColor = unstyledColor,
@@ -106,14 +111,17 @@ const Picker: React.FC<PickerProps> = ({
   rightIconName,
   type = "solid",
 }) => {
+  const androidPickerRef = React.useRef<any | undefined>(undefined);
+
   const [internalValue, setInternalValue] = React.useState<string | undefined>(
     value || defaultValue
   );
 
-  const [pickerVisible, togglePickerVisible] = React.useReducer(
-    (state) => !state,
-    false
-  );
+  const [pickerVisible, setPickerVisible] = React.useState(false);
+
+  const togglePickerVisible = () => {
+    setPickerVisible(!pickerVisible);
+  };
 
   React.useEffect(() => {
     if (value != null) {
@@ -127,13 +135,19 @@ const Picker: React.FC<PickerProps> = ({
     }
   }, [defaultValue]);
 
+  React.useEffect(() => {
+    if (pickerVisible && androidPickerRef.current) {
+      androidPickerRef?.current?.focus();
+    }
+  }, [pickerVisible, androidPickerRef]);
+
   const normalizedOptions = normalizeOptions(options);
 
   const pickerOptions = placeholder
     ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
     : normalizedOptions;
 
-  const { colors } = theme;
+  // const { colors } = theme;
 
   const { viewStyles, textStyles } = extractStyles(style);
 
@@ -193,8 +207,6 @@ const Picker: React.FC<PickerProps> = ({
     ...extractedMarginStyles,
   };
 
-  const platform = Platform.OS;
-
   const stylesWithoutBordersAndMargins = omit(viewStyles, [
     ...borderStyleNames,
     ...marginStyleNames,
@@ -334,8 +346,23 @@ const Picker: React.FC<PickerProps> = ({
         {assistiveTextLabel}
       </Touchable>
 
+      <View>
+        {pickerVisible ? (
+          <PickerComponent
+            {...{
+              Icon,
+              androidPickerRef,
+              togglePickerVisible,
+              pickerOptions,
+              internalValue,
+              handleValueChange,
+            }}
+          />
+        ) : null}
+      </View>
+
       {/* iosPicker */}
-      {platform === "ios" && pickerVisible ? (
+      {/* isIos && pickerVisible ? (
         <Portal>
           <View
             style={[
@@ -371,15 +398,17 @@ const Picker: React.FC<PickerProps> = ({
             </SafeAreaView>
           </View>
         </Portal>
-      ) : null}
+      ) : null */}
 
       {/* nonIosPicker */}
-      {platform !== "ios" ? (
+      {/* !isIos && pickerVisible ? (
         <NativePicker
-          enabled={!disabled}
+          enabled={pickerVisible}
           selectedValue={internalValue}
           onValueChange={handleValueChange}
           style={styles.nonIosPicker}
+          ref={androidPickerRef}
+          onBlur={() => setPickerVisible(false)}
         >
           {(pickerOptions as unknown as PickerOption[]).map((option) => (
             <NativePicker.Item
@@ -389,7 +418,7 @@ const Picker: React.FC<PickerProps> = ({
             />
           ))}
         </NativePicker>
-      ) : null}
+      ) : null */}
     </View>
   );
 };
@@ -400,6 +429,8 @@ const styles = StyleSheet.create({
   marginsContainer: {
     alignSelf: "stretch",
     alignItems: "center",
+    width: "100%",
+    maxWidth: deviceWidth,
   },
   touchableContainer: {
     flex: 1,
@@ -407,6 +438,7 @@ const styles = StyleSheet.create({
     width: "100%",
     alignSelf: "stretch",
     alignItems: "center",
+    backgroundColor: "pink", // TODO
   },
   outsetContainer: {
     flex: 1,
@@ -436,11 +468,15 @@ const styles = StyleSheet.create({
     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",
@@ -456,5 +492,7 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     width: "100%",
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight,
   },
 });

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { StyleSheet, Dimensions } from "react-native";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+export const PickerComponent = ({ androidPickerRef, togglePickerVisible, pickerOptions, internalValue, handleValueChange, }) => {
+    return (React.createElement(NativePicker, { selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: togglePickerVisible }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))));
+};
+const styles = StyleSheet.create({
+    nonIosPicker: {
+        opacity: 0,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: "100%",
+        maxWidth: deviceWidth,
+        maxHeight: deviceHeight,
+    },
+});