@draftbit/core 42.2.2 → 42.2.3-428e28.0

package/lib/commonjs/components/Picker/Picker.js

@@ -31,12 +31,17 @@ function normalizeOptions(options) {
   if (typeof options[0] === "string") {
     return options.map(option => ({
       label: option,
-      value: option
+      value: String(option)
     }));
   }
 
   if (options[0].label && options[0].value) {
-    return options;
+    return options.map(option => {
+      return {
+        label: option.label,
+        value: String(option.value)
+      };
+    });
   }
 
   throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
@@ -55,19 +60,19 @@ const Picker = ({
       return;
     }
 
-    onValueChangeOverride && onValueChangeOverride(itemValue, itemIndex);
+    onValueChangeOverride && onValueChangeOverride(String(itemValue), itemIndex);
   }, [placeholder, onValueChangeOverride]);
   const normalizedOptions = normalizeOptions(options);
   const previousInitialValue = (0, _hooks.usePrevious)(initialValue);
   React.useEffect(() => {
-    if (initialValue !== previousInitialValue) {
+    if (String(initialValue) !== String(previousInitialValue)) {
       const index = normalizedOptions.findIndex(opt => opt.value === initialValue);
 
       if (index == null) {
         return;
       }
 
-      onValueChange(initialValue, index);
+      onValueChange(String(initialValue), index);
     }
   }, [initialValue, previousInitialValue, normalizedOptions, onValueChange]);
   const pickerOptions = placeholder ? [{
@@ -75,7 +80,7 @@ const Picker = ({
     label: placeholder
   }, ...normalizedOptions] : normalizedOptions;
   return /*#__PURE__*/React.createElement(_PickerComponent.default, _extends({}, props, {
-    selectedValue: value,
+    selectedValue: String(value),
     placeholder: placeholder,
     options: pickerOptions,
     onValueChange: onValueChange

package/lib/commonjs/components/Picker/Picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Picker.tsx"],"names":["normalizeOptions","options","length","map","option","label","value","Error","Picker","placeholder","onValueChange","onValueChangeOverride","initialValue","props","React","useCallback","itemValue","itemIndex","normalizedOptions","previousInitialValue","useEffect","index","findIndex","opt","pickerOptions","SEED_DATA_PROPS","group","GROUPS","data","description","formType","FORM_TYPES","string","propType","PROP_TYPES","STRING","defaultValue","editable","required","basic","placeholderTextColor","color","assistiveText","array","OBJECT","disabled","boolean","BOOLEAN","error","leftIconName","icon","ASSET","leftIconMode","flatArray","rightIconName","fieldName","FIELD_NAME","handlerPropName","SEED_DATA_TRIGGERS","Triggers","OnValueChange","SEED_DATA","name","tag","category","COMPONENT_TYPES","input","preview_image_url","supports_list_render","triggers","type","layout","uncategorized"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { withTheme } from \"../../theming\";\n//@ts-ignore\nimport PickerComponent from \"./PickerComponent\"; //unable to find file due to using .android/.web/.ios\nimport { PickerComponentProps, PickerOption } from \"./PickerTypes\";\n\nimport {\n  GROUPS,\n  COMPONENT_TYPES,\n  FORM_TYPES,\n  PROP_TYPES,\n  FIELD_NAME,\n  Triggers,\n} from \"@draftbit/types\";\nimport { usePrevious } from \"../../hooks\";\n\ntype Props = PickerComponentProps & {\n  placeholder?: string;\n  value: string;\n  options: PickerOption[] | string[];\n};\n\nfunction normalizeOptions(options: Props[\"options\"]): PickerOption[] {\n  if (options.length === 0) {\n    return [];\n  }\n\n  if (typeof options[0] === \"string\") {\n    return (options as string[]).map((option) => ({\n      label: option,\n      value: option,\n    }));\n  }\n\n  if (options[0].label && options[0].value) {\n    return options as PickerOption[];\n  }\n\n  throw new Error(\n    'Picker options must be either an array of strings or array of { \"label\": string; \"value\": string; } objects.'\n  );\n}\n\nconst Picker: React.FC<Props> = ({\n  options = [],\n  placeholder,\n  onValueChange: onValueChangeOverride,\n  value,\n  initialValue,\n  ...props\n}) => {\n  const onValueChange = React.useCallback(\n    (itemValue: string, itemIndex: number) => {\n      if (placeholder && itemIndex === 0) {\n        return;\n      }\n      onValueChangeOverride && onValueChangeOverride(itemValue, itemIndex);\n    },\n    [placeholder, onValueChangeOverride]\n  );\n\n  const normalizedOptions = normalizeOptions(options);\n\n  const previousInitialValue = usePrevious(initialValue);\n  React.useEffect(() => {\n    if (initialValue !== previousInitialValue) {\n      const index = normalizedOptions.findIndex(\n        (opt) => opt.value === initialValue\n      );\n\n      if (index == null) {\n        return;\n      }\n\n      onValueChange(initialValue, index);\n    }\n  }, [initialValue, previousInitialValue, normalizedOptions, onValueChange]);\n\n  const pickerOptions = placeholder\n    ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]\n    : normalizedOptions;\n\n  return (\n    <PickerComponent\n      {...props}\n      selectedValue={value}\n      placeholder={placeholder}\n      options={pickerOptions}\n      onValueChange={onValueChange}\n    />\n  );\n};\n\nexport default withTheme(Picker);\n\nconst SEED_DATA_PROPS = {\n  label: {\n    group: GROUPS.data,\n    label: \"Label\",\n    description: \"The label to be displayed on the picker\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: null,\n    editable: true,\n    required: true,\n  },\n  placeholder: {\n    group: GROUPS.basic,\n    label: \"Placeholder\",\n    description: \"The placeholder text of the picker\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: \"Select an option\",\n    editable: true,\n    required: false,\n  },\n  placeholderTextColor: {\n    group: GROUPS.basic,\n    label: \"Placeholder Text Color\",\n    description: \"The color of the placeholder text.\",\n    editable: true,\n    required: false,\n    defaultValue: null,\n    formType: FORM_TYPES.color,\n    propType: PROP_TYPES.STRING,\n  },\n  assistiveText: {\n    group: GROUPS.basic,\n    label: \"Assistive text\",\n    description: \"Helper text to display below the picker\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  options: {\n    group: GROUPS.data,\n    label: \"Options\",\n    description:\n      \"Array of picker options. An array of objects containing a label and value.\",\n    editable: true,\n    required: false,\n    formType: FORM_TYPES.array,\n    propType: PROP_TYPES.OBJECT,\n    options: [],\n    defaultValue: null,\n  },\n  disabled: {\n    group: GROUPS.basic,\n    label: \"Disabled\",\n    description:\n      \"Whether the picker should be disabled. Will prevent selection and show a greyed out state.\",\n    formType: FORM_TYPES.boolean,\n    propType: PROP_TYPES.BOOLEAN,\n    defaultValue: false,\n    editable: true,\n    required: false,\n  },\n  error: {\n    group: GROUPS.data,\n    label: \"Error\",\n    description: \"Whether the picker should display the error state\",\n    formType: FORM_TYPES.boolean,\n    propType: PROP_TYPES.BOOLEAN,\n    defaultValue: false,\n    editable: true,\n    required: false,\n  },\n  leftIconName: {\n    group: GROUPS.basic,\n    label: \"Left icon name\",\n    description: \"The icon to display on the left\",\n    formType: FORM_TYPES.icon,\n    propType: PROP_TYPES.ASSET,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  leftIconMode: {\n    group: GROUPS.basic,\n    label: \"Left icon mode\",\n    description:\n      \"The mode of the icon to display on the left. 'inset' or 'outset'.\",\n    formType: FORM_TYPES.flatArray,\n    propType: PROP_TYPES.STRING,\n    defaultValue: \"inset\",\n    options: [\"inset\", \"outset\"],\n    editable: true,\n    required: true,\n  },\n  rightIconName: {\n    group: GROUPS.basic,\n    label: \"Right icon name\",\n    description: \"The icon to display on the right\",\n    formType: FORM_TYPES.icon,\n    propType: PROP_TYPES.ASSET,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  fieldName: {\n    ...FIELD_NAME,\n    defaultValue: \"pickerValue\",\n    handlerPropName: \"onValueChange\",\n  },\n};\n\nconst SEED_DATA_TRIGGERS = [Triggers.OnValueChange];\nexport const SEED_DATA = [\n  {\n    name: \"Picker\",\n    tag: \"Picker\",\n    description: \"A component used to pick a value from a set of options\",\n    category: COMPONENT_TYPES.input,\n    preview_image_url: \"{CLOUDINARY_URL}/Picker.png\",\n    supports_list_render: false,\n    triggers: SEED_DATA_TRIGGERS,\n    props: {\n      ...SEED_DATA_PROPS,\n      type: {\n        label: \"Appearance\",\n        description: \"Type of Picker\",\n        formType: FORM_TYPES.flatArray,\n        propType: PROP_TYPES.STRING,\n        defaultValue: \"solid\",\n        options: [\"solid\", \"underline\"],\n        editable: true,\n        required: true,\n        group: GROUPS.basic,\n      },\n    },\n    layout: {},\n  },\n  {\n    name: \"Picker - Underline\",\n    tag: \"Picker\",\n    description: \"A picker with an underline\",\n    category: COMPONENT_TYPES.input,\n    preview_image_url: \"{CLOUDINARY_URL}/Picker.png\",\n    supports_list_render: false,\n    triggers: SEED_DATA_TRIGGERS,\n    props: {\n      ...SEED_DATA_PROPS,\n      type: {\n        label: \"Type\",\n        description: \"Type\",\n        group: GROUPS.uncategorized,\n        formType: FORM_TYPES.string,\n        propType: PROP_TYPES.STRING,\n        defaultValue: \"underline\",\n        editable: false,\n        required: false,\n      },\n    },\n    layout: {},\n  },\n];\n"]}
+{"version":3,"sources":["Picker.tsx"],"names":["normalizeOptions","options","length","map","option","label","value","String","Error","Picker","placeholder","onValueChange","onValueChangeOverride","initialValue","props","React","useCallback","itemValue","itemIndex","normalizedOptions","previousInitialValue","useEffect","index","findIndex","opt","pickerOptions","SEED_DATA_PROPS","group","GROUPS","data","description","formType","FORM_TYPES","string","propType","PROP_TYPES","STRING","defaultValue","editable","required","basic","placeholderTextColor","color","assistiveText","array","OBJECT","disabled","boolean","BOOLEAN","error","leftIconName","icon","ASSET","leftIconMode","flatArray","rightIconName","fieldName","FIELD_NAME","handlerPropName","SEED_DATA_TRIGGERS","Triggers","OnValueChange","SEED_DATA","name","tag","category","COMPONENT_TYPES","input","preview_image_url","supports_list_render","triggers","type","layout","uncategorized"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAGA;;AAQA;;;;;;;;;;AAQA,SAASA,gBAAT,CAA0BC,OAA1B,EAAqE;AACnE,MAAIA,OAAO,CAACC,MAAR,KAAmB,CAAvB,EAA0B;AACxB,WAAO,EAAP;AACD;;AAED,MAAI,OAAOD,OAAO,CAAC,CAAD,CAAd,KAAsB,QAA1B,EAAoC;AAClC,WAAQA,OAAD,CAAsBE,GAAtB,CAA2BC,MAAD,KAAa;AAC5CC,MAAAA,KAAK,EAAED,MADqC;AAE5CE,MAAAA,KAAK,EAAEC,MAAM,CAACH,MAAD;AAF+B,KAAb,CAA1B,CAAP;AAID;;AAED,MAAIH,OAAO,CAAC,CAAD,CAAP,CAAWI,KAAX,IAAoBJ,OAAO,CAAC,CAAD,CAAP,CAAWK,KAAnC,EAA0C;AACxC,WAAOL,OAAO,CAACE,GAAR,CAAaC,MAAD,IAAY;AAC7B,aAAO;AACLC,QAAAA,KAAK,EAAED,MAAM,CAACC,KADT;AAELC,QAAAA,KAAK,EAAEC,MAAM,CAACH,MAAM,CAACE,KAAR;AAFR,OAAP;AAID,KALM,CAAP;AAMD;;AAED,QAAM,IAAIE,KAAJ,CACJ,8GADI,CAAN;AAGD;;AAED,MAAMC,MAAuB,GAAG,CAAC;AAC/BR,EAAAA,OAAO,GAAG,EADqB;AAE/BS,EAAAA,WAF+B;AAG/BC,EAAAA,aAAa,EAAEC,qBAHgB;AAI/BN,EAAAA,KAJ+B;AAK/BO,EAAAA,YAL+B;AAM/B,KAAGC;AAN4B,CAAD,KAO1B;AACJ,QAAMH,aAAa,GAAGI,KAAK,CAACC,WAAN,CACpB,CAACC,SAAD,EAAoBC,SAApB,KAA0C;AACxC,QAAIR,WAAW,IAAIQ,SAAS,KAAK,CAAjC,EAAoC;AAClC;AACD;;AACDN,IAAAA,qBAAqB,IACnBA,qBAAqB,CAACL,MAAM,CAACU,SAAD,CAAP,EAAoBC,SAApB,CADvB;AAED,GAPmB,EAQpB,CAACR,WAAD,EAAcE,qBAAd,CARoB,CAAtB;AAWA,QAAMO,iBAAiB,GAAGnB,gBAAgB,CAACC,OAAD,CAA1C;AAEA,QAAMmB,oBAAoB,GAAG,wBAAYP,YAAZ,CAA7B;AACAE,EAAAA,KAAK,CAACM,SAAN,CAAgB,MAAM;AACpB,QAAId,MAAM,CAACM,YAAD,CAAN,KAAyBN,MAAM,CAACa,oBAAD,CAAnC,EAA2D;AACzD,YAAME,KAAK,GAAGH,iBAAiB,CAACI,SAAlB,CACXC,GAAD,IAASA,GAAG,CAAClB,KAAJ,KAAcO,YADX,CAAd;;AAIA,UAAIS,KAAK,IAAI,IAAb,EAAmB;AACjB;AACD;;AAEDX,MAAAA,aAAa,CAACJ,MAAM,CAACM,YAAD,CAAP,EAAuBS,KAAvB,CAAb;AACD;AACF,GAZD,EAYG,CAACT,YAAD,EAAeO,oBAAf,EAAqCD,iBAArC,EAAwDR,aAAxD,CAZH;AAcA,QAAMc,aAAa,GAAGf,WAAW,GAC7B,CAAC;AAAEJ,IAAAA,KAAK,EAAEI,WAAT;AAAsBL,IAAAA,KAAK,EAAEK;AAA7B,GAAD,EAA6C,GAAGS,iBAAhD,CAD6B,GAE7BA,iBAFJ;AAIA,sBACE,oBAAC,wBAAD,eACML,KADN;AAEE,IAAA,aAAa,EAAEP,MAAM,CAACD,KAAD,CAFvB;AAGE,IAAA,WAAW,EAAEI,WAHf;AAIE,IAAA,OAAO,EAAEe,aAJX;AAKE,IAAA,aAAa,EAAEd;AALjB,KADF;AASD,CAjDD;;eAmDe,wBAAUF,MAAV,C;;;AAEf,MAAMiB,eAAe,GAAG;AACtBrB,EAAAA,KAAK,EAAE;AACLsB,IAAAA,KAAK,EAAEC,cAAOC,IADT;AAELxB,IAAAA,KAAK,EAAE,OAFF;AAGLyB,IAAAA,WAAW,EAAE,yCAHR;AAILC,IAAAA,QAAQ,EAAEC,kBAAWC,MAJhB;AAKLC,IAAAA,QAAQ,EAAEC,kBAAWC,MALhB;AAMLC,IAAAA,YAAY,EAAE,IANT;AAOLC,IAAAA,QAAQ,EAAE,IAPL;AAQLC,IAAAA,QAAQ,EAAE;AARL,GADe;AAWtB7B,EAAAA,WAAW,EAAE;AACXiB,IAAAA,KAAK,EAAEC,cAAOY,KADH;AAEXnC,IAAAA,KAAK,EAAE,aAFI;AAGXyB,IAAAA,WAAW,EAAE,oCAHF;AAIXC,IAAAA,QAAQ,EAAEC,kBAAWC,MAJV;AAKXC,IAAAA,QAAQ,EAAEC,kBAAWC,MALV;AAMXC,IAAAA,YAAY,EAAE,kBANH;AAOXC,IAAAA,QAAQ,EAAE,IAPC;AAQXC,IAAAA,QAAQ,EAAE;AARC,GAXS;AAqBtBE,EAAAA,oBAAoB,EAAE;AACpBd,IAAAA,KAAK,EAAEC,cAAOY,KADM;AAEpBnC,IAAAA,KAAK,EAAE,wBAFa;AAGpByB,IAAAA,WAAW,EAAE,oCAHO;AAIpBQ,IAAAA,QAAQ,EAAE,IAJU;AAKpBC,IAAAA,QAAQ,EAAE,KALU;AAMpBF,IAAAA,YAAY,EAAE,IANM;AAOpBN,IAAAA,QAAQ,EAAEC,kBAAWU,KAPD;AAQpBR,IAAAA,QAAQ,EAAEC,kBAAWC;AARD,GArBA;AA+BtBO,EAAAA,aAAa,EAAE;AACbhB,IAAAA,KAAK,EAAEC,cAAOY,KADD;AAEbnC,IAAAA,KAAK,EAAE,gBAFM;AAGbyB,IAAAA,WAAW,EAAE,yCAHA;AAIbC,IAAAA,QAAQ,EAAEC,kBAAWC,MAJR;AAKbC,IAAAA,QAAQ,EAAEC,kBAAWC,MALR;AAMbC,IAAAA,YAAY,EAAE,IAND;AAObC,IAAAA,QAAQ,EAAE,IAPG;AAQbC,IAAAA,QAAQ,EAAE;AARG,GA/BO;AAyCtBtC,EAAAA,OAAO,EAAE;AACP0B,IAAAA,KAAK,EAAEC,cAAOC,IADP;AAEPxB,IAAAA,KAAK,EAAE,SAFA;AAGPyB,IAAAA,WAAW,EACT,4EAJK;AAKPQ,IAAAA,QAAQ,EAAE,IALH;AAMPC,IAAAA,QAAQ,EAAE,KANH;AAOPR,IAAAA,QAAQ,EAAEC,kBAAWY,KAPd;AAQPV,IAAAA,QAAQ,EAAEC,kBAAWU,MARd;AASP5C,IAAAA,OAAO,EAAE,EATF;AAUPoC,IAAAA,YAAY,EAAE;AAVP,GAzCa;AAqDtBS,EAAAA,QAAQ,EAAE;AACRnB,IAAAA,KAAK,EAAEC,cAAOY,KADN;AAERnC,IAAAA,KAAK,EAAE,UAFC;AAGRyB,IAAAA,WAAW,EACT,4FAJM;AAKRC,IAAAA,QAAQ,EAAEC,kBAAWe,OALb;AAMRb,IAAAA,QAAQ,EAAEC,kBAAWa,OANb;AAORX,IAAAA,YAAY,EAAE,KAPN;AAQRC,IAAAA,QAAQ,EAAE,IARF;AASRC,IAAAA,QAAQ,EAAE;AATF,GArDY;AAgEtBU,EAAAA,KAAK,EAAE;AACLtB,IAAAA,KAAK,EAAEC,cAAOC,IADT;AAELxB,IAAAA,KAAK,EAAE,OAFF;AAGLyB,IAAAA,WAAW,EAAE,mDAHR;AAILC,IAAAA,QAAQ,EAAEC,kBAAWe,OAJhB;AAKLb,IAAAA,QAAQ,EAAEC,kBAAWa,OALhB;AAMLX,IAAAA,YAAY,EAAE,KANT;AAOLC,IAAAA,QAAQ,EAAE,IAPL;AAQLC,IAAAA,QAAQ,EAAE;AARL,GAhEe;AA0EtBW,EAAAA,YAAY,EAAE;AACZvB,IAAAA,KAAK,EAAEC,cAAOY,KADF;AAEZnC,IAAAA,KAAK,EAAE,gBAFK;AAGZyB,IAAAA,WAAW,EAAE,iCAHD;AAIZC,IAAAA,QAAQ,EAAEC,kBAAWmB,IAJT;AAKZjB,IAAAA,QAAQ,EAAEC,kBAAWiB,KALT;AAMZf,IAAAA,YAAY,EAAE,IANF;AAOZC,IAAAA,QAAQ,EAAE,IAPE;AAQZC,IAAAA,QAAQ,EAAE;AARE,GA1EQ;AAoFtBc,EAAAA,YAAY,EAAE;AACZ1B,IAAAA,KAAK,EAAEC,cAAOY,KADF;AAEZnC,IAAAA,KAAK,EAAE,gBAFK;AAGZyB,IAAAA,WAAW,EACT,mEAJU;AAKZC,IAAAA,QAAQ,EAAEC,kBAAWsB,SALT;AAMZpB,IAAAA,QAAQ,EAAEC,kBAAWC,MANT;AAOZC,IAAAA,YAAY,EAAE,OAPF;AAQZpC,IAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,QAAV,CARG;AASZqC,IAAAA,QAAQ,EAAE,IATE;AAUZC,IAAAA,QAAQ,EAAE;AAVE,GApFQ;AAgGtBgB,EAAAA,aAAa,EAAE;AACb5B,IAAAA,KAAK,EAAEC,cAAOY,KADD;AAEbnC,IAAAA,KAAK,EAAE,iBAFM;AAGbyB,IAAAA,WAAW,EAAE,kCAHA;AAIbC,IAAAA,QAAQ,EAAEC,kBAAWmB,IAJR;AAKbjB,IAAAA,QAAQ,EAAEC,kBAAWiB,KALR;AAMbf,IAAAA,YAAY,EAAE,IAND;AAObC,IAAAA,QAAQ,EAAE,IAPG;AAQbC,IAAAA,QAAQ,EAAE;AARG,GAhGO;AA0GtBiB,EAAAA,SAAS,EAAE,EACT,GAAGC,iBADM;AAETpB,IAAAA,YAAY,EAAE,aAFL;AAGTqB,IAAAA,eAAe,EAAE;AAHR;AA1GW,CAAxB;AAiHA,MAAMC,kBAAkB,GAAG,CAACC,gBAASC,aAAV,CAA3B;AACO,MAAMC,SAAS,GAAG,CACvB;AACEC,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,GAAG,EAAE,QAFP;AAGElC,EAAAA,WAAW,EAAE,wDAHf;AAIEmC,EAAAA,QAAQ,EAAEC,uBAAgBC,KAJ5B;AAKEC,EAAAA,iBAAiB,EAAE,6BALrB;AAMEC,EAAAA,oBAAoB,EAAE,KANxB;AAOEC,EAAAA,QAAQ,EAAEX,kBAPZ;AAQE7C,EAAAA,KAAK,EAAE,EACL,GAAGY,eADE;AAEL6C,IAAAA,IAAI,EAAE;AACJlE,MAAAA,KAAK,EAAE,YADH;AAEJyB,MAAAA,WAAW,EAAE,gBAFT;AAGJC,MAAAA,QAAQ,EAAEC,kBAAWsB,SAHjB;AAIJpB,MAAAA,QAAQ,EAAEC,kBAAWC,MAJjB;AAKJC,MAAAA,YAAY,EAAE,OALV;AAMJpC,MAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,WAAV,CANL;AAOJqC,MAAAA,QAAQ,EAAE,IAPN;AAQJC,MAAAA,QAAQ,EAAE,IARN;AASJZ,MAAAA,KAAK,EAAEC,cAAOY;AATV;AAFD,GART;AAsBEgC,EAAAA,MAAM,EAAE;AAtBV,CADuB,EAyBvB;AACET,EAAAA,IAAI,EAAE,oBADR;AAEEC,EAAAA,GAAG,EAAE,QAFP;AAGElC,EAAAA,WAAW,EAAE,4BAHf;AAIEmC,EAAAA,QAAQ,EAAEC,uBAAgBC,KAJ5B;AAKEC,EAAAA,iBAAiB,EAAE,6BALrB;AAMEC,EAAAA,oBAAoB,EAAE,KANxB;AAOEC,EAAAA,QAAQ,EAAEX,kBAPZ;AAQE7C,EAAAA,KAAK,EAAE,EACL,GAAGY,eADE;AAEL6C,IAAAA,IAAI,EAAE;AACJlE,MAAAA,KAAK,EAAE,MADH;AAEJyB,MAAAA,WAAW,EAAE,MAFT;AAGJH,MAAAA,KAAK,EAAEC,cAAO6C,aAHV;AAIJ1C,MAAAA,QAAQ,EAAEC,kBAAWC,MAJjB;AAKJC,MAAAA,QAAQ,EAAEC,kBAAWC,MALjB;AAMJC,MAAAA,YAAY,EAAE,WANV;AAOJC,MAAAA,QAAQ,EAAE,KAPN;AAQJC,MAAAA,QAAQ,EAAE;AARN;AAFD,GART;AAqBEiC,EAAAA,MAAM,EAAE;AArBV,CAzBuB,CAAlB","sourcesContent":["import * as React from \"react\";\nimport { withTheme } from \"../../theming\";\n//@ts-ignore\nimport PickerComponent from \"./PickerComponent\"; //unable to find file due to using .android/.web/.ios\nimport { PickerComponentProps, PickerOption } from \"./PickerTypes\";\n\nimport {\n  GROUPS,\n  COMPONENT_TYPES,\n  FORM_TYPES,\n  PROP_TYPES,\n  FIELD_NAME,\n  Triggers,\n} from \"@draftbit/types\";\nimport { usePrevious } from \"../../hooks\";\n\ntype Props = PickerComponentProps & {\n  placeholder?: string;\n  value: string;\n  options: PickerOption[] | string[];\n};\n\nfunction normalizeOptions(options: Props[\"options\"]): PickerOption[] {\n  if (options.length === 0) {\n    return [];\n  }\n\n  if (typeof options[0] === \"string\") {\n    return (options as string[]).map((option) => ({\n      label: option,\n      value: String(option),\n    }));\n  }\n\n  if (options[0].label && options[0].value) {\n    return options.map((option) => {\n      return {\n        label: option.label,\n        value: String(option.value),\n      };\n    });\n  }\n\n  throw new Error(\n    'Picker options must be either an array of strings or array of { \"label\": string; \"value\": string; } objects.'\n  );\n}\n\nconst Picker: React.FC<Props> = ({\n  options = [],\n  placeholder,\n  onValueChange: onValueChangeOverride,\n  value,\n  initialValue,\n  ...props\n}) => {\n  const onValueChange = React.useCallback(\n    (itemValue: string, itemIndex: number) => {\n      if (placeholder && itemIndex === 0) {\n        return;\n      }\n      onValueChangeOverride &&\n        onValueChangeOverride(String(itemValue), itemIndex);\n    },\n    [placeholder, onValueChangeOverride]\n  );\n\n  const normalizedOptions = normalizeOptions(options);\n\n  const previousInitialValue = usePrevious(initialValue);\n  React.useEffect(() => {\n    if (String(initialValue) !== String(previousInitialValue)) {\n      const index = normalizedOptions.findIndex(\n        (opt) => opt.value === initialValue\n      );\n\n      if (index == null) {\n        return;\n      }\n\n      onValueChange(String(initialValue), index);\n    }\n  }, [initialValue, previousInitialValue, normalizedOptions, onValueChange]);\n\n  const pickerOptions = placeholder\n    ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]\n    : normalizedOptions;\n\n  return (\n    <PickerComponent\n      {...props}\n      selectedValue={String(value)}\n      placeholder={placeholder}\n      options={pickerOptions}\n      onValueChange={onValueChange}\n    />\n  );\n};\n\nexport default withTheme(Picker);\n\nconst SEED_DATA_PROPS = {\n  label: {\n    group: GROUPS.data,\n    label: \"Label\",\n    description: \"The label to be displayed on the picker\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: null,\n    editable: true,\n    required: true,\n  },\n  placeholder: {\n    group: GROUPS.basic,\n    label: \"Placeholder\",\n    description: \"The placeholder text of the picker\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: \"Select an option\",\n    editable: true,\n    required: false,\n  },\n  placeholderTextColor: {\n    group: GROUPS.basic,\n    label: \"Placeholder Text Color\",\n    description: \"The color of the placeholder text.\",\n    editable: true,\n    required: false,\n    defaultValue: null,\n    formType: FORM_TYPES.color,\n    propType: PROP_TYPES.STRING,\n  },\n  assistiveText: {\n    group: GROUPS.basic,\n    label: \"Assistive text\",\n    description: \"Helper text to display below the picker\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  options: {\n    group: GROUPS.data,\n    label: \"Options\",\n    description:\n      \"Array of picker options. An array of objects containing a label and value.\",\n    editable: true,\n    required: false,\n    formType: FORM_TYPES.array,\n    propType: PROP_TYPES.OBJECT,\n    options: [],\n    defaultValue: null,\n  },\n  disabled: {\n    group: GROUPS.basic,\n    label: \"Disabled\",\n    description:\n      \"Whether the picker should be disabled. Will prevent selection and show a greyed out state.\",\n    formType: FORM_TYPES.boolean,\n    propType: PROP_TYPES.BOOLEAN,\n    defaultValue: false,\n    editable: true,\n    required: false,\n  },\n  error: {\n    group: GROUPS.data,\n    label: \"Error\",\n    description: \"Whether the picker should display the error state\",\n    formType: FORM_TYPES.boolean,\n    propType: PROP_TYPES.BOOLEAN,\n    defaultValue: false,\n    editable: true,\n    required: false,\n  },\n  leftIconName: {\n    group: GROUPS.basic,\n    label: \"Left icon name\",\n    description: \"The icon to display on the left\",\n    formType: FORM_TYPES.icon,\n    propType: PROP_TYPES.ASSET,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  leftIconMode: {\n    group: GROUPS.basic,\n    label: \"Left icon mode\",\n    description:\n      \"The mode of the icon to display on the left. 'inset' or 'outset'.\",\n    formType: FORM_TYPES.flatArray,\n    propType: PROP_TYPES.STRING,\n    defaultValue: \"inset\",\n    options: [\"inset\", \"outset\"],\n    editable: true,\n    required: true,\n  },\n  rightIconName: {\n    group: GROUPS.basic,\n    label: \"Right icon name\",\n    description: \"The icon to display on the right\",\n    formType: FORM_TYPES.icon,\n    propType: PROP_TYPES.ASSET,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  fieldName: {\n    ...FIELD_NAME,\n    defaultValue: \"pickerValue\",\n    handlerPropName: \"onValueChange\",\n  },\n};\n\nconst SEED_DATA_TRIGGERS = [Triggers.OnValueChange];\nexport const SEED_DATA = [\n  {\n    name: \"Picker\",\n    tag: \"Picker\",\n    description: \"A component used to pick a value from a set of options\",\n    category: COMPONENT_TYPES.input,\n    preview_image_url: \"{CLOUDINARY_URL}/Picker.png\",\n    supports_list_render: false,\n    triggers: SEED_DATA_TRIGGERS,\n    props: {\n      ...SEED_DATA_PROPS,\n      type: {\n        label: \"Appearance\",\n        description: \"Type of Picker\",\n        formType: FORM_TYPES.flatArray,\n        propType: PROP_TYPES.STRING,\n        defaultValue: \"solid\",\n        options: [\"solid\", \"underline\"],\n        editable: true,\n        required: true,\n        group: GROUPS.basic,\n      },\n    },\n    layout: {},\n  },\n  {\n    name: \"Picker - Underline\",\n    tag: \"Picker\",\n    description: \"A picker with an underline\",\n    category: COMPONENT_TYPES.input,\n    preview_image_url: \"{CLOUDINARY_URL}/Picker.png\",\n    supports_list_render: false,\n    triggers: SEED_DATA_TRIGGERS,\n    props: {\n      ...SEED_DATA_PROPS,\n      type: {\n        label: \"Type\",\n        description: \"Type\",\n        group: GROUPS.uncategorized,\n        formType: FORM_TYPES.string,\n        propType: PROP_TYPES.STRING,\n        defaultValue: \"underline\",\n        editable: false,\n        required: false,\n      },\n    },\n    layout: {},\n  },\n];\n"]}

package/lib/commonjs/components/Picker/PickerComponent.android.js

@@ -84,7 +84,7 @@ const Picker = ({
   };
 
   const stylesWithoutMargin = style && (0, _lodash.default)(_reactNative.StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
-  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(opt => opt.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
+  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
   return /*#__PURE__*/React.createElement(_Touchable.default, {
     disabled: disabled,
     onPress: toggleFocus,
@@ -92,14 +92,15 @@ const Picker = ({
   }, /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_picker.Picker, {
     enabled: !disabled,
     selectedValue: selectedValue,
-    onValueChange: (value, index) => onValueChange(value.toString(), index),
+    onValueChange: onValueChange,
     style: {
       opacity: 0,
       position: "absolute",
       top: 0,
       left: 0,
       right: 0,
-      bottom: 0
+      bottom: 0,
+      width: "100%"
     }
   }, options.map(o => /*#__PURE__*/React.createElement(_picker.Picker.Item, {
     label: o.label,

package/lib/commonjs/components/Picker/PickerComponent.android.js.map

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

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

@@ -48,6 +48,8 @@ const Picker = ({
   },
   ...props
 }) => {
+  var _options$find$label, _options$find;
+
   const {
     viewStyles: {
       borderRadius,
@@ -89,13 +91,14 @@ const Picker = ({
   };
 
   const stylesWithoutMargin = style && (0, _lodash.default)(_reactNative.StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
+  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
   return /*#__PURE__*/React.createElement(_reactNative.View, {
     style: [styles.container, viewStyles]
   }, /*#__PURE__*/React.createElement(_Touchable.default, {
     disabled: disabled,
     onPress: toggleVisibility
   }, /*#__PURE__*/React.createElement(_TextField.default, _extends({}, props, {
-    value: selectedValue,
+    value: String(selectedLabel),
     placeholder: placeholder // @ts-ignore
     ,
     ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
@@ -116,8 +119,11 @@ const Picker = ({
     onPress: toggleVisibility,
     style: styles.closeButton
   }, "Close"), /*#__PURE__*/React.createElement(_picker.Picker, {
+    style: {
+      backgroundColor: "white"
+    },
     selectedValue: selectedValue,
-    onValueChange: (value, index) => onValueChange(value.toString(), index)
+    onValueChange: onValueChange
   }, options.map(o => /*#__PURE__*/React.createElement(_picker.Picker.Item, {
     label: o.label,
     value: o.value,
@@ -138,6 +144,7 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   pickerContainer: {
+    backgroundColor: "white",
     flexDirection: "column",
     width: "100%"
   },

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

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

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

@@ -9,6 +9,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
+var _picker = require("@react-native-picker/picker");
+
 var _lodash = _interopRequireDefault(require("lodash.omit"));
 
 var _theming = require("../../theming");
@@ -84,15 +86,15 @@ const Picker = ({
   };
 
   const stylesWithoutMargin = style && (0, _lodash.default)(_reactNative.StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
-  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(opt => opt.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
+  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
   return /*#__PURE__*/React.createElement(_Touchable.default, {
     disabled: disabled,
     onPress: toggleFocus,
     style: [styles.container, viewStyles]
-  }, /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNative.Picker, {
+  }, /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_picker.Picker, {
     enabled: !disabled,
     selectedValue: selectedValue,
-    onValueChange: (value, index) => onValueChange(value.toString(), index),
+    onValueChange: onValueChange,
     style: {
       flex: 1,
       opacity: 0,
@@ -100,9 +102,10 @@ const Picker = ({
       top: 0,
       left: 0,
       right: 0,
-      bottom: 0
+      bottom: 0,
+      width: "100%"
     }
-  }, options.map(o => /*#__PURE__*/React.createElement(_reactNative.Picker.Item, {
+  }, options.map(o => /*#__PURE__*/React.createElement(_picker.Picker.Item, {
     label: o.label,
     value: o.value,
     key: o.value

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

@@ -1 +1 @@
-{"version":3,"sources":["PickerComponent.web.tsx"],"names":["Picker","style","options","placeholder","selectedValue","disabled","onValueChange","onValueChangeOverride","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","React","useRef","undefined","itemValue","itemIndex","toggleFocus","current","stylesWithoutMargin","StyleSheet","flatten","selectedLabel","find","opt","value","label","styles","container","index","toString","flex","opacity","position","top","left","right","bottom","map","o","create","alignSelf"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet, Picker as NativePicker } from \"react-native\";\nimport omit from \"lodash.omit\";\nimport { withTheme } from \"../../theming\";\nimport { extractStyles } from \"../../utilities\";\n\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\n\nconst Picker: React.FC<PickerComponentProps> = ({\n  style,\n  options,\n  placeholder,\n  selectedValue,\n  disabled = false,\n  onValueChange: onValueChangeOverride = () => {},\n  ...props\n}) => {\n  const {\n    viewStyles: {\n      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...viewStyles\n    },\n  } = extractStyles(style);\n\n  const textField = React.useRef<typeof TextField | undefined>(undefined);\n\n  const onValueChange = (itemValue: string, itemIndex: number) => {\n    toggleFocus();\n    onValueChangeOverride(itemValue, itemIndex);\n  };\n\n  const toggleFocus = () => {\n    if (!disabled) {\n      // @ts-ignore\n      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n    }\n  };\n\n  const stylesWithoutMargin =\n    style &&\n    omit(StyleSheet.flatten(style), [\n      \"margin\",\n      \"marginTop\",\n      \"marginRight\",\n      \"marginBottom\",\n      \"marginLeft\",\n    ]);\n\n  const selectedLabel =\n    selectedValue &&\n    (options.find((opt) => opt.value === selectedValue)?.label ??\n      selectedValue);\n\n  return (\n    <Touchable\n      disabled={disabled}\n      onPress={toggleFocus}\n      style={[styles.container, viewStyles]}\n    >\n      <View>\n        <NativePicker\n          enabled={!disabled}\n          selectedValue={selectedValue}\n          onValueChange={(value, index) =>\n            onValueChange(value.toString(), index)\n          }\n          style={{\n            flex: 1,\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n          }}\n        >\n          {options.map((o) => (\n            <NativePicker.Item label={o.label} value={o.value} key={o.value} />\n          ))}\n        </NativePicker>\n        <View pointerEvents=\"none\">\n          <TextField\n            {...props}\n            value={selectedLabel}\n            placeholder={placeholder}\n            // @ts-ignore\n            ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n            disabled={disabled}\n            // @ts-expect-error\n            style={stylesWithoutMargin}\n          />\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: \"stretch\",\n  },\n});\n\nexport default withTheme(Picker);\n"]}
+{"version":3,"sources":["PickerComponent.web.tsx"],"names":["Picker","style","options","placeholder","selectedValue","disabled","onValueChange","onValueChangeOverride","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","React","useRef","undefined","itemValue","itemIndex","toggleFocus","current","stylesWithoutMargin","StyleSheet","flatten","selectedLabel","find","o","value","label","styles","container","flex","opacity","position","top","left","right","bottom","width","map","create","alignSelf"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\nimport omit from \"lodash.omit\";\nimport { withTheme } from \"../../theming\";\nimport { extractStyles } from \"../../utilities\";\n\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\n\nconst Picker: React.FC<PickerComponentProps> = ({\n  style,\n  options,\n  placeholder,\n  selectedValue,\n  disabled = false,\n  onValueChange: onValueChangeOverride = () => {},\n  ...props\n}) => {\n  const {\n    viewStyles: {\n      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...viewStyles\n    },\n  } = extractStyles(style);\n\n  const textField = React.useRef<typeof TextField | undefined>(undefined);\n\n  const onValueChange = (itemValue: string, itemIndex: number) => {\n    toggleFocus();\n    onValueChangeOverride(itemValue, itemIndex);\n  };\n\n  const toggleFocus = () => {\n    if (!disabled) {\n      // @ts-ignore\n      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n    }\n  };\n\n  const stylesWithoutMargin =\n    style &&\n    omit(StyleSheet.flatten(style), [\n      \"margin\",\n      \"marginTop\",\n      \"marginRight\",\n      \"marginBottom\",\n      \"marginLeft\",\n    ]);\n\n  const selectedLabel =\n    selectedValue &&\n    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);\n\n  return (\n    <Touchable\n      disabled={disabled}\n      onPress={toggleFocus}\n      style={[styles.container, viewStyles]}\n    >\n      <View>\n        <NativePicker\n          enabled={!disabled}\n          selectedValue={selectedValue}\n          onValueChange={onValueChange}\n          style={{\n            flex: 1,\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            width: \"100%\",\n          }}\n        >\n          {options.map((o) => (\n            <NativePicker.Item label={o.label} value={o.value} key={o.value} />\n          ))}\n        </NativePicker>\n        <View pointerEvents=\"none\">\n          <TextField\n            {...props}\n            value={selectedLabel}\n            placeholder={placeholder}\n            // @ts-ignore\n            ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n            disabled={disabled}\n            // @ts-expect-error\n            style={stylesWithoutMargin}\n          />\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: \"stretch\",\n  },\n});\n\nexport default withTheme(Picker);\n"]}

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

@@ -16,12 +16,17 @@ function normalizeOptions(options) {
   if (typeof options[0] === "string") {
     return options.map(option => ({
       label: option,
-      value: option
+      value: String(option)
     }));
   }
 
   if (options[0].label && options[0].value) {
-    return options;
+    return options.map(option => {
+      return {
+        label: option.label,
+        value: String(option.value)
+      };
+    });
   }
 
   throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
@@ -40,19 +45,19 @@ const Picker = ({
       return;
     }
 
-    onValueChangeOverride && onValueChangeOverride(itemValue, itemIndex);
+    onValueChangeOverride && onValueChangeOverride(String(itemValue), itemIndex);
   }, [placeholder, onValueChangeOverride]);
   const normalizedOptions = normalizeOptions(options);
   const previousInitialValue = usePrevious(initialValue);
   React.useEffect(() => {
-    if (initialValue !== previousInitialValue) {
+    if (String(initialValue) !== String(previousInitialValue)) {
       const index = normalizedOptions.findIndex(opt => opt.value === initialValue);
 
       if (index == null) {
         return;
       }
 
-      onValueChange(initialValue, index);
+      onValueChange(String(initialValue), index);
     }
   }, [initialValue, previousInitialValue, normalizedOptions, onValueChange]);
   const pickerOptions = placeholder ? [{
@@ -60,7 +65,7 @@ const Picker = ({
     label: placeholder
   }, ...normalizedOptions] : normalizedOptions;
   return /*#__PURE__*/React.createElement(PickerComponent, _extends({}, props, {
-    selectedValue: value,
+    selectedValue: String(value),
     placeholder: placeholder,
     options: pickerOptions,
     onValueChange: onValueChange

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

@@ -1 +1 @@
-{"version":3,"sources":["Picker.tsx"],"names":["React","withTheme","PickerComponent","GROUPS","COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","FIELD_NAME","Triggers","usePrevious","normalizeOptions","options","length","map","option","label","value","Error","Picker","placeholder","onValueChange","onValueChangeOverride","initialValue","props","useCallback","itemValue","itemIndex","normalizedOptions","previousInitialValue","useEffect","index","findIndex","opt","pickerOptions","SEED_DATA_PROPS","group","data","description","formType","string","propType","STRING","defaultValue","editable","required","basic","placeholderTextColor","color","assistiveText","array","OBJECT","disabled","boolean","BOOLEAN","error","leftIconName","icon","ASSET","leftIconMode","flatArray","rightIconName","fieldName","handlerPropName","SEED_DATA_TRIGGERS","OnValueChange","SEED_DATA","name","tag","category","input","preview_image_url","supports_list_render","triggers","type","layout","uncategorized"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,SAAT,QAA0B,eAA1B,C,CACA;;AACA,OAAOC,eAAP,MAA4B,mBAA5B,C,CAAiD;;AAGjD,SACEC,MADF,EAEEC,eAFF,EAGEC,UAHF,EAIEC,UAJF,EAKEC,UALF,EAMEC,QANF,QAOO,iBAPP;AAQA,SAASC,WAAT,QAA4B,aAA5B;;AAQA,SAASC,gBAAT,CAA0BC,OAA1B,EAAqE;AACnE,MAAIA,OAAO,CAACC,MAAR,KAAmB,CAAvB,EAA0B;AACxB,WAAO,EAAP;AACD;;AAED,MAAI,OAAOD,OAAO,CAAC,CAAD,CAAd,KAAsB,QAA1B,EAAoC;AAClC,WAAQA,OAAD,CAAsBE,GAAtB,CAA2BC,MAAD,KAAa;AAC5CC,MAAAA,KAAK,EAAED,MADqC;AAE5CE,MAAAA,KAAK,EAAEF;AAFqC,KAAb,CAA1B,CAAP;AAID;;AAED,MAAIH,OAAO,CAAC,CAAD,CAAP,CAAWI,KAAX,IAAoBJ,OAAO,CAAC,CAAD,CAAP,CAAWK,KAAnC,EAA0C;AACxC,WAAOL,OAAP;AACD;;AAED,QAAM,IAAIM,KAAJ,CACJ,8GADI,CAAN;AAGD;;AAED,MAAMC,MAAuB,GAAG,CAAC;AAC/BP,EAAAA,OAAO,GAAG,EADqB;AAE/BQ,EAAAA,WAF+B;AAG/BC,EAAAA,aAAa,EAAEC,qBAHgB;AAI/BL,EAAAA,KAJ+B;AAK/BM,EAAAA,YAL+B;AAM/B,KAAGC;AAN4B,CAAD,KAO1B;AACJ,QAAMH,aAAa,GAAGpB,KAAK,CAACwB,WAAN,CACpB,CAACC,SAAD,EAAoBC,SAApB,KAA0C;AACxC,QAAIP,WAAW,IAAIO,SAAS,KAAK,CAAjC,EAAoC;AAClC;AACD;;AACDL,IAAAA,qBAAqB,IAAIA,qBAAqB,CAACI,SAAD,EAAYC,SAAZ,CAA9C;AACD,GANmB,EAOpB,CAACP,WAAD,EAAcE,qBAAd,CAPoB,CAAtB;AAUA,QAAMM,iBAAiB,GAAGjB,gBAAgB,CAACC,OAAD,CAA1C;AAEA,QAAMiB,oBAAoB,GAAGnB,WAAW,CAACa,YAAD,CAAxC;AACAtB,EAAAA,KAAK,CAAC6B,SAAN,CAAgB,MAAM;AACpB,QAAIP,YAAY,KAAKM,oBAArB,EAA2C;AACzC,YAAME,KAAK,GAAGH,iBAAiB,CAACI,SAAlB,CACXC,GAAD,IAASA,GAAG,CAAChB,KAAJ,KAAcM,YADX,CAAd;;AAIA,UAAIQ,KAAK,IAAI,IAAb,EAAmB;AACjB;AACD;;AAEDV,MAAAA,aAAa,CAACE,YAAD,EAAeQ,KAAf,CAAb;AACD;AACF,GAZD,EAYG,CAACR,YAAD,EAAeM,oBAAf,EAAqCD,iBAArC,EAAwDP,aAAxD,CAZH;AAcA,QAAMa,aAAa,GAAGd,WAAW,GAC7B,CAAC;AAAEH,IAAAA,KAAK,EAAEG,WAAT;AAAsBJ,IAAAA,KAAK,EAAEI;AAA7B,GAAD,EAA6C,GAAGQ,iBAAhD,CAD6B,GAE7BA,iBAFJ;AAIA,sBACE,oBAAC,eAAD,eACMJ,KADN;AAEE,IAAA,aAAa,EAAEP,KAFjB;AAGE,IAAA,WAAW,EAAEG,WAHf;AAIE,IAAA,OAAO,EAAEc,aAJX;AAKE,IAAA,aAAa,EAAEb;AALjB,KADF;AASD,CAhDD;;AAkDA,eAAenB,SAAS,CAACiB,MAAD,CAAxB;AAEA,MAAMgB,eAAe,GAAG;AACtBnB,EAAAA,KAAK,EAAE;AACLoB,IAAAA,KAAK,EAAEhC,MAAM,CAACiC,IADT;AAELrB,IAAAA,KAAK,EAAE,OAFF;AAGLsB,IAAAA,WAAW,EAAE,yCAHR;AAILC,IAAAA,QAAQ,EAAEjC,UAAU,CAACkC,MAJhB;AAKLC,IAAAA,QAAQ,EAAElC,UAAU,CAACmC,MALhB;AAMLC,IAAAA,YAAY,EAAE,IANT;AAOLC,IAAAA,QAAQ,EAAE,IAPL;AAQLC,IAAAA,QAAQ,EAAE;AARL,GADe;AAWtBzB,EAAAA,WAAW,EAAE;AACXgB,IAAAA,KAAK,EAAEhC,MAAM,CAAC0C,KADH;AAEX9B,IAAAA,KAAK,EAAE,aAFI;AAGXsB,IAAAA,WAAW,EAAE,oCAHF;AAIXC,IAAAA,QAAQ,EAAEjC,UAAU,CAACkC,MAJV;AAKXC,IAAAA,QAAQ,EAAElC,UAAU,CAACmC,MALV;AAMXC,IAAAA,YAAY,EAAE,kBANH;AAOXC,IAAAA,QAAQ,EAAE,IAPC;AAQXC,IAAAA,QAAQ,EAAE;AARC,GAXS;AAqBtBE,EAAAA,oBAAoB,EAAE;AACpBX,IAAAA,KAAK,EAAEhC,MAAM,CAAC0C,KADM;AAEpB9B,IAAAA,KAAK,EAAE,wBAFa;AAGpBsB,IAAAA,WAAW,EAAE,oCAHO;AAIpBM,IAAAA,QAAQ,EAAE,IAJU;AAKpBC,IAAAA,QAAQ,EAAE,KALU;AAMpBF,IAAAA,YAAY,EAAE,IANM;AAOpBJ,IAAAA,QAAQ,EAAEjC,UAAU,CAAC0C,KAPD;AAQpBP,IAAAA,QAAQ,EAAElC,UAAU,CAACmC;AARD,GArBA;AA+BtBO,EAAAA,aAAa,EAAE;AACbb,IAAAA,KAAK,EAAEhC,MAAM,CAAC0C,KADD;AAEb9B,IAAAA,KAAK,EAAE,gBAFM;AAGbsB,IAAAA,WAAW,EAAE,yCAHA;AAIbC,IAAAA,QAAQ,EAAEjC,UAAU,CAACkC,MAJR;AAKbC,IAAAA,QAAQ,EAAElC,UAAU,CAACmC,MALR;AAMbC,IAAAA,YAAY,EAAE,IAND;AAObC,IAAAA,QAAQ,EAAE,IAPG;AAQbC,IAAAA,QAAQ,EAAE;AARG,GA/BO;AAyCtBjC,EAAAA,OAAO,EAAE;AACPwB,IAAAA,KAAK,EAAEhC,MAAM,CAACiC,IADP;AAEPrB,IAAAA,KAAK,EAAE,SAFA;AAGPsB,IAAAA,WAAW,EACT,4EAJK;AAKPM,IAAAA,QAAQ,EAAE,IALH;AAMPC,IAAAA,QAAQ,EAAE,KANH;AAOPN,IAAAA,QAAQ,EAAEjC,UAAU,CAAC4C,KAPd;AAQPT,IAAAA,QAAQ,EAAElC,UAAU,CAAC4C,MARd;AASPvC,IAAAA,OAAO,EAAE,EATF;AAUP+B,IAAAA,YAAY,EAAE;AAVP,GAzCa;AAqDtBS,EAAAA,QAAQ,EAAE;AACRhB,IAAAA,KAAK,EAAEhC,MAAM,CAAC0C,KADN;AAER9B,IAAAA,KAAK,EAAE,UAFC;AAGRsB,IAAAA,WAAW,EACT,4FAJM;AAKRC,IAAAA,QAAQ,EAAEjC,UAAU,CAAC+C,OALb;AAMRZ,IAAAA,QAAQ,EAAElC,UAAU,CAAC+C,OANb;AAORX,IAAAA,YAAY,EAAE,KAPN;AAQRC,IAAAA,QAAQ,EAAE,IARF;AASRC,IAAAA,QAAQ,EAAE;AATF,GArDY;AAgEtBU,EAAAA,KAAK,EAAE;AACLnB,IAAAA,KAAK,EAAEhC,MAAM,CAACiC,IADT;AAELrB,IAAAA,KAAK,EAAE,OAFF;AAGLsB,IAAAA,WAAW,EAAE,mDAHR;AAILC,IAAAA,QAAQ,EAAEjC,UAAU,CAAC+C,OAJhB;AAKLZ,IAAAA,QAAQ,EAAElC,UAAU,CAAC+C,OALhB;AAMLX,IAAAA,YAAY,EAAE,KANT;AAOLC,IAAAA,QAAQ,EAAE,IAPL;AAQLC,IAAAA,QAAQ,EAAE;AARL,GAhEe;AA0EtBW,EAAAA,YAAY,EAAE;AACZpB,IAAAA,KAAK,EAAEhC,MAAM,CAAC0C,KADF;AAEZ9B,IAAAA,KAAK,EAAE,gBAFK;AAGZsB,IAAAA,WAAW,EAAE,iCAHD;AAIZC,IAAAA,QAAQ,EAAEjC,UAAU,CAACmD,IAJT;AAKZhB,IAAAA,QAAQ,EAAElC,UAAU,CAACmD,KALT;AAMZf,IAAAA,YAAY,EAAE,IANF;AAOZC,IAAAA,QAAQ,EAAE,IAPE;AAQZC,IAAAA,QAAQ,EAAE;AARE,GA1EQ;AAoFtBc,EAAAA,YAAY,EAAE;AACZvB,IAAAA,KAAK,EAAEhC,MAAM,CAAC0C,KADF;AAEZ9B,IAAAA,KAAK,EAAE,gBAFK;AAGZsB,IAAAA,WAAW,EACT,mEAJU;AAKZC,IAAAA,QAAQ,EAAEjC,UAAU,CAACsD,SALT;AAMZnB,IAAAA,QAAQ,EAAElC,UAAU,CAACmC,MANT;AAOZC,IAAAA,YAAY,EAAE,OAPF;AAQZ/B,IAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,QAAV,CARG;AASZgC,IAAAA,QAAQ,EAAE,IATE;AAUZC,IAAAA,QAAQ,EAAE;AAVE,GApFQ;AAgGtBgB,EAAAA,aAAa,EAAE;AACbzB,IAAAA,KAAK,EAAEhC,MAAM,CAAC0C,KADD;AAEb9B,IAAAA,KAAK,EAAE,iBAFM;AAGbsB,IAAAA,WAAW,EAAE,kCAHA;AAIbC,IAAAA,QAAQ,EAAEjC,UAAU,CAACmD,IAJR;AAKbhB,IAAAA,QAAQ,EAAElC,UAAU,CAACmD,KALR;AAMbf,IAAAA,YAAY,EAAE,IAND;AAObC,IAAAA,QAAQ,EAAE,IAPG;AAQbC,IAAAA,QAAQ,EAAE;AARG,GAhGO;AA0GtBiB,EAAAA,SAAS,EAAE,EACT,GAAGtD,UADM;AAETmC,IAAAA,YAAY,EAAE,aAFL;AAGToB,IAAAA,eAAe,EAAE;AAHR;AA1GW,CAAxB;AAiHA,MAAMC,kBAAkB,GAAG,CAACvD,QAAQ,CAACwD,aAAV,CAA3B;AACA,OAAO,MAAMC,SAAS,GAAG,CACvB;AACEC,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,GAAG,EAAE,QAFP;AAGE9B,EAAAA,WAAW,EAAE,wDAHf;AAIE+B,EAAAA,QAAQ,EAAEhE,eAAe,CAACiE,KAJ5B;AAKEC,EAAAA,iBAAiB,EAAE,6BALrB;AAMEC,EAAAA,oBAAoB,EAAE,KANxB;AAOEC,EAAAA,QAAQ,EAAET,kBAPZ;AAQExC,EAAAA,KAAK,EAAE,EACL,GAAGW,eADE;AAELuC,IAAAA,IAAI,EAAE;AACJ1D,MAAAA,KAAK,EAAE,YADH;AAEJsB,MAAAA,WAAW,EAAE,gBAFT;AAGJC,MAAAA,QAAQ,EAAEjC,UAAU,CAACsD,SAHjB;AAIJnB,MAAAA,QAAQ,EAAElC,UAAU,CAACmC,MAJjB;AAKJC,MAAAA,YAAY,EAAE,OALV;AAMJ/B,MAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,WAAV,CANL;AAOJgC,MAAAA,QAAQ,EAAE,IAPN;AAQJC,MAAAA,QAAQ,EAAE,IARN;AASJT,MAAAA,KAAK,EAAEhC,MAAM,CAAC0C;AATV;AAFD,GART;AAsBE6B,EAAAA,MAAM,EAAE;AAtBV,CADuB,EAyBvB;AACER,EAAAA,IAAI,EAAE,oBADR;AAEEC,EAAAA,GAAG,EAAE,QAFP;AAGE9B,EAAAA,WAAW,EAAE,4BAHf;AAIE+B,EAAAA,QAAQ,EAAEhE,eAAe,CAACiE,KAJ5B;AAKEC,EAAAA,iBAAiB,EAAE,6BALrB;AAMEC,EAAAA,oBAAoB,EAAE,KANxB;AAOEC,EAAAA,QAAQ,EAAET,kBAPZ;AAQExC,EAAAA,KAAK,EAAE,EACL,GAAGW,eADE;AAELuC,IAAAA,IAAI,EAAE;AACJ1D,MAAAA,KAAK,EAAE,MADH;AAEJsB,MAAAA,WAAW,EAAE,MAFT;AAGJF,MAAAA,KAAK,EAAEhC,MAAM,CAACwE,aAHV;AAIJrC,MAAAA,QAAQ,EAAEjC,UAAU,CAACkC,MAJjB;AAKJC,MAAAA,QAAQ,EAAElC,UAAU,CAACmC,MALjB;AAMJC,MAAAA,YAAY,EAAE,WANV;AAOJC,MAAAA,QAAQ,EAAE,KAPN;AAQJC,MAAAA,QAAQ,EAAE;AARN;AAFD,GART;AAqBE8B,EAAAA,MAAM,EAAE;AArBV,CAzBuB,CAAlB","sourcesContent":["import * as React from \"react\";\nimport { withTheme } from \"../../theming\";\n//@ts-ignore\nimport PickerComponent from \"./PickerComponent\"; //unable to find file due to using .android/.web/.ios\nimport { PickerComponentProps, PickerOption } from \"./PickerTypes\";\n\nimport {\n  GROUPS,\n  COMPONENT_TYPES,\n  FORM_TYPES,\n  PROP_TYPES,\n  FIELD_NAME,\n  Triggers,\n} from \"@draftbit/types\";\nimport { usePrevious } from \"../../hooks\";\n\ntype Props = PickerComponentProps & {\n  placeholder?: string;\n  value: string;\n  options: PickerOption[] | string[];\n};\n\nfunction normalizeOptions(options: Props[\"options\"]): PickerOption[] {\n  if (options.length === 0) {\n    return [];\n  }\n\n  if (typeof options[0] === \"string\") {\n    return (options as string[]).map((option) => ({\n      label: option,\n      value: option,\n    }));\n  }\n\n  if (options[0].label && options[0].value) {\n    return options as PickerOption[];\n  }\n\n  throw new Error(\n    'Picker options must be either an array of strings or array of { \"label\": string; \"value\": string; } objects.'\n  );\n}\n\nconst Picker: React.FC<Props> = ({\n  options = [],\n  placeholder,\n  onValueChange: onValueChangeOverride,\n  value,\n  initialValue,\n  ...props\n}) => {\n  const onValueChange = React.useCallback(\n    (itemValue: string, itemIndex: number) => {\n      if (placeholder && itemIndex === 0) {\n        return;\n      }\n      onValueChangeOverride && onValueChangeOverride(itemValue, itemIndex);\n    },\n    [placeholder, onValueChangeOverride]\n  );\n\n  const normalizedOptions = normalizeOptions(options);\n\n  const previousInitialValue = usePrevious(initialValue);\n  React.useEffect(() => {\n    if (initialValue !== previousInitialValue) {\n      const index = normalizedOptions.findIndex(\n        (opt) => opt.value === initialValue\n      );\n\n      if (index == null) {\n        return;\n      }\n\n      onValueChange(initialValue, index);\n    }\n  }, [initialValue, previousInitialValue, normalizedOptions, onValueChange]);\n\n  const pickerOptions = placeholder\n    ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]\n    : normalizedOptions;\n\n  return (\n    <PickerComponent\n      {...props}\n      selectedValue={value}\n      placeholder={placeholder}\n      options={pickerOptions}\n      onValueChange={onValueChange}\n    />\n  );\n};\n\nexport default withTheme(Picker);\n\nconst SEED_DATA_PROPS = {\n  label: {\n    group: GROUPS.data,\n    label: \"Label\",\n    description: \"The label to be displayed on the picker\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: null,\n    editable: true,\n    required: true,\n  },\n  placeholder: {\n    group: GROUPS.basic,\n    label: \"Placeholder\",\n    description: \"The placeholder text of the picker\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: \"Select an option\",\n    editable: true,\n    required: false,\n  },\n  placeholderTextColor: {\n    group: GROUPS.basic,\n    label: \"Placeholder Text Color\",\n    description: \"The color of the placeholder text.\",\n    editable: true,\n    required: false,\n    defaultValue: null,\n    formType: FORM_TYPES.color,\n    propType: PROP_TYPES.STRING,\n  },\n  assistiveText: {\n    group: GROUPS.basic,\n    label: \"Assistive text\",\n    description: \"Helper text to display below the picker\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  options: {\n    group: GROUPS.data,\n    label: \"Options\",\n    description:\n      \"Array of picker options. An array of objects containing a label and value.\",\n    editable: true,\n    required: false,\n    formType: FORM_TYPES.array,\n    propType: PROP_TYPES.OBJECT,\n    options: [],\n    defaultValue: null,\n  },\n  disabled: {\n    group: GROUPS.basic,\n    label: \"Disabled\",\n    description:\n      \"Whether the picker should be disabled. Will prevent selection and show a greyed out state.\",\n    formType: FORM_TYPES.boolean,\n    propType: PROP_TYPES.BOOLEAN,\n    defaultValue: false,\n    editable: true,\n    required: false,\n  },\n  error: {\n    group: GROUPS.data,\n    label: \"Error\",\n    description: \"Whether the picker should display the error state\",\n    formType: FORM_TYPES.boolean,\n    propType: PROP_TYPES.BOOLEAN,\n    defaultValue: false,\n    editable: true,\n    required: false,\n  },\n  leftIconName: {\n    group: GROUPS.basic,\n    label: \"Left icon name\",\n    description: \"The icon to display on the left\",\n    formType: FORM_TYPES.icon,\n    propType: PROP_TYPES.ASSET,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  leftIconMode: {\n    group: GROUPS.basic,\n    label: \"Left icon mode\",\n    description:\n      \"The mode of the icon to display on the left. 'inset' or 'outset'.\",\n    formType: FORM_TYPES.flatArray,\n    propType: PROP_TYPES.STRING,\n    defaultValue: \"inset\",\n    options: [\"inset\", \"outset\"],\n    editable: true,\n    required: true,\n  },\n  rightIconName: {\n    group: GROUPS.basic,\n    label: \"Right icon name\",\n    description: \"The icon to display on the right\",\n    formType: FORM_TYPES.icon,\n    propType: PROP_TYPES.ASSET,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  fieldName: {\n    ...FIELD_NAME,\n    defaultValue: \"pickerValue\",\n    handlerPropName: \"onValueChange\",\n  },\n};\n\nconst SEED_DATA_TRIGGERS = [Triggers.OnValueChange];\nexport const SEED_DATA = [\n  {\n    name: \"Picker\",\n    tag: \"Picker\",\n    description: \"A component used to pick a value from a set of options\",\n    category: COMPONENT_TYPES.input,\n    preview_image_url: \"{CLOUDINARY_URL}/Picker.png\",\n    supports_list_render: false,\n    triggers: SEED_DATA_TRIGGERS,\n    props: {\n      ...SEED_DATA_PROPS,\n      type: {\n        label: \"Appearance\",\n        description: \"Type of Picker\",\n        formType: FORM_TYPES.flatArray,\n        propType: PROP_TYPES.STRING,\n        defaultValue: \"solid\",\n        options: [\"solid\", \"underline\"],\n        editable: true,\n        required: true,\n        group: GROUPS.basic,\n      },\n    },\n    layout: {},\n  },\n  {\n    name: \"Picker - Underline\",\n    tag: \"Picker\",\n    description: \"A picker with an underline\",\n    category: COMPONENT_TYPES.input,\n    preview_image_url: \"{CLOUDINARY_URL}/Picker.png\",\n    supports_list_render: false,\n    triggers: SEED_DATA_TRIGGERS,\n    props: {\n      ...SEED_DATA_PROPS,\n      type: {\n        label: \"Type\",\n        description: \"Type\",\n        group: GROUPS.uncategorized,\n        formType: FORM_TYPES.string,\n        propType: PROP_TYPES.STRING,\n        defaultValue: \"underline\",\n        editable: false,\n        required: false,\n      },\n    },\n    layout: {},\n  },\n];\n"]}
+{"version":3,"sources":["Picker.tsx"],"names":["React","withTheme","PickerComponent","GROUPS","COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","FIELD_NAME","Triggers","usePrevious","normalizeOptions","options","length","map","option","label","value","String","Error","Picker","placeholder","onValueChange","onValueChangeOverride","initialValue","props","useCallback","itemValue","itemIndex","normalizedOptions","previousInitialValue","useEffect","index","findIndex","opt","pickerOptions","SEED_DATA_PROPS","group","data","description","formType","string","propType","STRING","defaultValue","editable","required","basic","placeholderTextColor","color","assistiveText","array","OBJECT","disabled","boolean","BOOLEAN","error","leftIconName","icon","ASSET","leftIconMode","flatArray","rightIconName","fieldName","handlerPropName","SEED_DATA_TRIGGERS","OnValueChange","SEED_DATA","name","tag","category","input","preview_image_url","supports_list_render","triggers","type","layout","uncategorized"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { withTheme } from \"../../theming\";\n//@ts-ignore\nimport PickerComponent from \"./PickerComponent\"; //unable to find file due to using .android/.web/.ios\nimport { PickerComponentProps, PickerOption } from \"./PickerTypes\";\n\nimport {\n  GROUPS,\n  COMPONENT_TYPES,\n  FORM_TYPES,\n  PROP_TYPES,\n  FIELD_NAME,\n  Triggers,\n} from \"@draftbit/types\";\nimport { usePrevious } from \"../../hooks\";\n\ntype Props = PickerComponentProps & {\n  placeholder?: string;\n  value: string;\n  options: PickerOption[] | string[];\n};\n\nfunction normalizeOptions(options: Props[\"options\"]): PickerOption[] {\n  if (options.length === 0) {\n    return [];\n  }\n\n  if (typeof options[0] === \"string\") {\n    return (options as string[]).map((option) => ({\n      label: option,\n      value: String(option),\n    }));\n  }\n\n  if (options[0].label && options[0].value) {\n    return options.map((option) => {\n      return {\n        label: option.label,\n        value: String(option.value),\n      };\n    });\n  }\n\n  throw new Error(\n    'Picker options must be either an array of strings or array of { \"label\": string; \"value\": string; } objects.'\n  );\n}\n\nconst Picker: React.FC<Props> = ({\n  options = [],\n  placeholder,\n  onValueChange: onValueChangeOverride,\n  value,\n  initialValue,\n  ...props\n}) => {\n  const onValueChange = React.useCallback(\n    (itemValue: string, itemIndex: number) => {\n      if (placeholder && itemIndex === 0) {\n        return;\n      }\n      onValueChangeOverride &&\n        onValueChangeOverride(String(itemValue), itemIndex);\n    },\n    [placeholder, onValueChangeOverride]\n  );\n\n  const normalizedOptions = normalizeOptions(options);\n\n  const previousInitialValue = usePrevious(initialValue);\n  React.useEffect(() => {\n    if (String(initialValue) !== String(previousInitialValue)) {\n      const index = normalizedOptions.findIndex(\n        (opt) => opt.value === initialValue\n      );\n\n      if (index == null) {\n        return;\n      }\n\n      onValueChange(String(initialValue), index);\n    }\n  }, [initialValue, previousInitialValue, normalizedOptions, onValueChange]);\n\n  const pickerOptions = placeholder\n    ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]\n    : normalizedOptions;\n\n  return (\n    <PickerComponent\n      {...props}\n      selectedValue={String(value)}\n      placeholder={placeholder}\n      options={pickerOptions}\n      onValueChange={onValueChange}\n    />\n  );\n};\n\nexport default withTheme(Picker);\n\nconst SEED_DATA_PROPS = {\n  label: {\n    group: GROUPS.data,\n    label: \"Label\",\n    description: \"The label to be displayed on the picker\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: null,\n    editable: true,\n    required: true,\n  },\n  placeholder: {\n    group: GROUPS.basic,\n    label: \"Placeholder\",\n    description: \"The placeholder text of the picker\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: \"Select an option\",\n    editable: true,\n    required: false,\n  },\n  placeholderTextColor: {\n    group: GROUPS.basic,\n    label: \"Placeholder Text Color\",\n    description: \"The color of the placeholder text.\",\n    editable: true,\n    required: false,\n    defaultValue: null,\n    formType: FORM_TYPES.color,\n    propType: PROP_TYPES.STRING,\n  },\n  assistiveText: {\n    group: GROUPS.basic,\n    label: \"Assistive text\",\n    description: \"Helper text to display below the picker\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  options: {\n    group: GROUPS.data,\n    label: \"Options\",\n    description:\n      \"Array of picker options. An array of objects containing a label and value.\",\n    editable: true,\n    required: false,\n    formType: FORM_TYPES.array,\n    propType: PROP_TYPES.OBJECT,\n    options: [],\n    defaultValue: null,\n  },\n  disabled: {\n    group: GROUPS.basic,\n    label: \"Disabled\",\n    description:\n      \"Whether the picker should be disabled. Will prevent selection and show a greyed out state.\",\n    formType: FORM_TYPES.boolean,\n    propType: PROP_TYPES.BOOLEAN,\n    defaultValue: false,\n    editable: true,\n    required: false,\n  },\n  error: {\n    group: GROUPS.data,\n    label: \"Error\",\n    description: \"Whether the picker should display the error state\",\n    formType: FORM_TYPES.boolean,\n    propType: PROP_TYPES.BOOLEAN,\n    defaultValue: false,\n    editable: true,\n    required: false,\n  },\n  leftIconName: {\n    group: GROUPS.basic,\n    label: \"Left icon name\",\n    description: \"The icon to display on the left\",\n    formType: FORM_TYPES.icon,\n    propType: PROP_TYPES.ASSET,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  leftIconMode: {\n    group: GROUPS.basic,\n    label: \"Left icon mode\",\n    description:\n      \"The mode of the icon to display on the left. 'inset' or 'outset'.\",\n    formType: FORM_TYPES.flatArray,\n    propType: PROP_TYPES.STRING,\n    defaultValue: \"inset\",\n    options: [\"inset\", \"outset\"],\n    editable: true,\n    required: true,\n  },\n  rightIconName: {\n    group: GROUPS.basic,\n    label: \"Right icon name\",\n    description: \"The icon to display on the right\",\n    formType: FORM_TYPES.icon,\n    propType: PROP_TYPES.ASSET,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  fieldName: {\n    ...FIELD_NAME,\n    defaultValue: \"pickerValue\",\n    handlerPropName: \"onValueChange\",\n  },\n};\n\nconst SEED_DATA_TRIGGERS = [Triggers.OnValueChange];\nexport const SEED_DATA = [\n  {\n    name: \"Picker\",\n    tag: \"Picker\",\n    description: \"A component used to pick a value from a set of options\",\n    category: COMPONENT_TYPES.input,\n    preview_image_url: \"{CLOUDINARY_URL}/Picker.png\",\n    supports_list_render: false,\n    triggers: SEED_DATA_TRIGGERS,\n    props: {\n      ...SEED_DATA_PROPS,\n      type: {\n        label: \"Appearance\",\n        description: \"Type of Picker\",\n        formType: FORM_TYPES.flatArray,\n        propType: PROP_TYPES.STRING,\n        defaultValue: \"solid\",\n        options: [\"solid\", \"underline\"],\n        editable: true,\n        required: true,\n        group: GROUPS.basic,\n      },\n    },\n    layout: {},\n  },\n  {\n    name: \"Picker - Underline\",\n    tag: \"Picker\",\n    description: \"A picker with an underline\",\n    category: COMPONENT_TYPES.input,\n    preview_image_url: \"{CLOUDINARY_URL}/Picker.png\",\n    supports_list_render: false,\n    triggers: SEED_DATA_TRIGGERS,\n    props: {\n      ...SEED_DATA_PROPS,\n      type: {\n        label: \"Type\",\n        description: \"Type\",\n        group: GROUPS.uncategorized,\n        formType: FORM_TYPES.string,\n        propType: PROP_TYPES.STRING,\n        defaultValue: \"underline\",\n        editable: false,\n        required: false,\n      },\n    },\n    layout: {},\n  },\n];\n"]}

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

@@ -66,7 +66,7 @@ const Picker = ({
   };
 
   const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
-  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(opt => opt.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
+  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
   return /*#__PURE__*/React.createElement(Touchable, {
     disabled: disabled,
     onPress: toggleFocus,
@@ -74,14 +74,15 @@ const Picker = ({
   }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(NativePicker, {
     enabled: !disabled,
     selectedValue: selectedValue,
-    onValueChange: (value, index) => onValueChange(value.toString(), index),
+    onValueChange: onValueChange,
     style: {
       opacity: 0,
       position: "absolute",
       top: 0,
       left: 0,
       right: 0,
-      bottom: 0
+      bottom: 0,
+      width: "100%"
     }
   }, options.map(o => /*#__PURE__*/React.createElement(NativePicker.Item, {
     label: o.label,

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

@@ -1 +1 @@
-{"version":3,"sources":["PickerComponent.android.tsx"],"names":["React","View","StyleSheet","omit","withTheme","Picker","NativePicker","extractStyles","TextField","Touchable","style","options","placeholder","selectedValue","disabled","onValueChange","onValueChangeOverride","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","useRef","undefined","itemValue","itemIndex","toggleFocus","current","stylesWithoutMargin","flatten","selectedLabel","find","opt","value","label","styles","container","index","toString","opacity","position","top","left","right","bottom","map","o","create","alignSelf"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport omit from \"lodash.omit\";\nimport { withTheme } from \"../../theming\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\nimport { extractStyles } from \"../../utilities\";\n\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\n\nconst Picker: React.FC<PickerComponentProps> = ({\n  style,\n  options,\n  placeholder,\n  selectedValue,\n  disabled = false,\n  onValueChange: onValueChangeOverride = () => {},\n  ...props\n}) => {\n  const {\n    viewStyles: {\n      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...viewStyles\n    },\n  } = extractStyles(style);\n\n  const textField = React.useRef<typeof TextField | undefined>(undefined);\n\n  const onValueChange = (itemValue: string, itemIndex: number) => {\n    toggleFocus();\n    onValueChangeOverride(itemValue, itemIndex);\n  };\n\n  const toggleFocus = () => {\n    if (!disabled) {\n      // @ts-ignore\n      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n    }\n  };\n\n  const stylesWithoutMargin =\n    style &&\n    omit(StyleSheet.flatten(style), [\n      \"margin\",\n      \"marginTop\",\n      \"marginRight\",\n      \"marginBottom\",\n      \"marginLeft\",\n    ]);\n\n  const selectedLabel =\n    selectedValue &&\n    (options.find((opt) => opt.value === selectedValue)?.label ??\n      selectedValue);\n\n  return (\n    <Touchable\n      disabled={disabled}\n      onPress={toggleFocus}\n      style={[styles.container, viewStyles]}\n    >\n      <View>\n        <NativePicker\n          enabled={!disabled}\n          selectedValue={selectedValue}\n          onValueChange={(value, index) =>\n            onValueChange(value.toString(), index)\n          }\n          style={{\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n          }}\n        >\n          {options.map((o) => (\n            <NativePicker.Item label={o.label} value={o.value} key={o.value} />\n          ))}\n        </NativePicker>\n        <View pointerEvents=\"none\">\n          <TextField\n            {...props}\n            value={selectedLabel}\n            placeholder={placeholder}\n            // @ts-ignore\n            ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n            disabled={disabled}\n            // @ts-expect-error\n            style={stylesWithoutMargin}\n          />\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: \"stretch\",\n  },\n});\n\nexport default withTheme(Picker);\n"]}
+{"version":3,"sources":["PickerComponent.android.tsx"],"names":["React","View","StyleSheet","omit","withTheme","Picker","NativePicker","extractStyles","TextField","Touchable","style","options","placeholder","selectedValue","disabled","onValueChange","onValueChangeOverride","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","useRef","undefined","itemValue","itemIndex","toggleFocus","current","stylesWithoutMargin","flatten","selectedLabel","find","o","value","label","styles","container","opacity","position","top","left","right","bottom","width","map","create","alignSelf"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport omit from \"lodash.omit\";\nimport { withTheme } from \"../../theming\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\nimport { extractStyles } from \"../../utilities\";\n\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\n\nconst Picker: React.FC<PickerComponentProps> = ({\n  style,\n  options,\n  placeholder,\n  selectedValue,\n  disabled = false,\n  onValueChange: onValueChangeOverride = () => {},\n  ...props\n}) => {\n  const {\n    viewStyles: {\n      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...viewStyles\n    },\n  } = extractStyles(style);\n\n  const textField = React.useRef<typeof TextField | undefined>(undefined);\n\n  const onValueChange = (itemValue: string, itemIndex: number) => {\n    toggleFocus();\n    onValueChangeOverride(itemValue, itemIndex);\n  };\n\n  const toggleFocus = () => {\n    if (!disabled) {\n      // @ts-ignore\n      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n    }\n  };\n\n  const stylesWithoutMargin =\n    style &&\n    omit(StyleSheet.flatten(style), [\n      \"margin\",\n      \"marginTop\",\n      \"marginRight\",\n      \"marginBottom\",\n      \"marginLeft\",\n    ]);\n\n  const selectedLabel =\n    selectedValue &&\n    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);\n\n  return (\n    <Touchable\n      disabled={disabled}\n      onPress={toggleFocus}\n      style={[styles.container, viewStyles]}\n    >\n      <View>\n        <NativePicker\n          enabled={!disabled}\n          selectedValue={selectedValue}\n          onValueChange={onValueChange}\n          style={{\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            width: \"100%\",\n          }}\n        >\n          {options.map((o) => (\n            <NativePicker.Item label={o.label} value={o.value} key={o.value} />\n          ))}\n        </NativePicker>\n        <View pointerEvents=\"none\">\n          <TextField\n            {...props}\n            value={selectedLabel}\n            placeholder={placeholder}\n            // @ts-ignore\n            ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n            disabled={disabled}\n            // @ts-expect-error\n            style={stylesWithoutMargin}\n          />\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: \"stretch\",\n  },\n});\n\nexport default withTheme(Picker);\n"]}

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

@@ -25,6 +25,8 @@ const Picker = ({
   },
   ...props
 }) => {
+  var _options$find$label, _options$find;
+
   const {
     viewStyles: {
       borderRadius,
@@ -66,13 +68,14 @@ const Picker = ({
   };
 
   const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
+  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, viewStyles]
   }, /*#__PURE__*/React.createElement(Touchable, {
     disabled: disabled,
     onPress: toggleVisibility
   }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
-    value: selectedValue,
+    value: String(selectedLabel),
     placeholder: placeholder // @ts-ignore
     ,
     ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
@@ -93,8 +96,11 @@ const Picker = ({
     onPress: toggleVisibility,
     style: styles.closeButton
   }, "Close"), /*#__PURE__*/React.createElement(NativePicker, {
+    style: {
+      backgroundColor: "white"
+    },
     selectedValue: selectedValue,
-    onValueChange: (value, index) => onValueChange(value.toString(), index)
+    onValueChange: onValueChange
   }, options.map(o => /*#__PURE__*/React.createElement(NativePicker.Item, {
     label: o.label,
     value: o.value,
@@ -115,6 +121,7 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   pickerContainer: {
+    backgroundColor: "white",
     flexDirection: "column",
     width: "100%"
   },

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

@@ -1 +1 @@
-{"version":3,"sources":["PickerComponent.ios.tsx"],"names":["React","View","StyleSheet","SafeAreaView","omit","Picker","NativePicker","withTheme","Portal","Button","TextField","Touchable","extractStyles","Icon","style","options","placeholder","selectedValue","disabled","onValueChange","theme","colors","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","useRef","undefined","pickerVisible","setIsPickerVisible","useState","toggleVisibility","current","toggleFocus","stylesWithoutMargin","flatten","styles","container","picker","divider","pickerContainer","closeButton","value","index","toString","map","o","label","create","alignSelf","position","bottom","left","right","flexDirection","justifyContent","width"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\nimport omit from \"lodash.omit\";\n\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport { withTheme } from \"../../theming\";\n\nimport Portal from \"../Portal/Portal\";\nimport Button from \"../DeprecatedButton\";\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\nimport { extractStyles } from \"../../utilities\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nconst Picker: React.FC<PickerComponentProps & IconSlot> = ({\n  Icon,\n  style,\n  options,\n  placeholder,\n  selectedValue,\n  disabled = false,\n  onValueChange = () => {},\n  theme: { colors },\n  ...props\n}) => {\n  const {\n    viewStyles: {\n      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...viewStyles\n    },\n  } = extractStyles(style);\n\n  const textField = React.useRef<typeof TextField | undefined>(undefined);\n  const [pickerVisible, setIsPickerVisible] = React.useState(false);\n\n  const toggleVisibility = () => {\n    setIsPickerVisible(!pickerVisible);\n    // @ts-ignore\n    textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n  };\n\n  const stylesWithoutMargin =\n    style &&\n    omit(StyleSheet.flatten(style), [\n      \"margin\",\n      \"marginTop\",\n      \"marginRight\",\n      \"marginBottom\",\n      \"marginLeft\",\n    ]);\n\n  return (\n    <View style={[styles.container, viewStyles]}>\n      <Touchable disabled={disabled} onPress={toggleVisibility}>\n        <TextField\n          {...props}\n          value={selectedValue}\n          placeholder={placeholder}\n          // @ts-ignore\n          ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n          disabled={disabled}\n          pointerEvents=\"none\"\n          // @ts-expect-error\n          style={stylesWithoutMargin}\n        />\n      </Touchable>\n      {pickerVisible && (\n        <Portal>\n          <View style={[styles.picker, { backgroundColor: colors.divider }]}>\n            <SafeAreaView style={styles.pickerContainer}>\n              <Button\n                Icon={Icon}\n                type=\"text\"\n                onPress={toggleVisibility}\n                style={styles.closeButton}\n              >\n                Close\n              </Button>\n              <NativePicker\n                selectedValue={selectedValue}\n                onValueChange={(value, index) =>\n                  onValueChange(value.toString(), index)\n                }\n              >\n                {options.map((o: any) => (\n                  <NativePicker.Item\n                    label={o.label}\n                    value={o.value}\n                    key={o.value}\n                  />\n                ))}\n              </NativePicker>\n            </SafeAreaView>\n          </View>\n        </Portal>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: \"stretch\",\n  },\n  picker: {\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    flexDirection: \"row\",\n    justifyContent: \"center\",\n  },\n  pickerContainer: { flexDirection: \"column\", width: \"100%\" },\n  closeButton: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nexport default withTheme(Picker);\n"]}
+{"version":3,"sources":["PickerComponent.ios.tsx"],"names":["React","View","StyleSheet","SafeAreaView","omit","Picker","NativePicker","withTheme","Portal","Button","TextField","Touchable","extractStyles","Icon","style","options","placeholder","selectedValue","disabled","onValueChange","theme","colors","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","useRef","undefined","pickerVisible","setIsPickerVisible","useState","toggleVisibility","current","toggleFocus","stylesWithoutMargin","flatten","selectedLabel","find","o","value","label","styles","container","String","picker","divider","pickerContainer","closeButton","map","create","alignSelf","position","bottom","left","right","flexDirection","justifyContent","width"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,UAAf,QAAiC,cAAjC;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,OAAOC,IAAP,MAAiB,aAAjB;AAEA,SAASC,MAAM,IAAIC,YAAnB,QAAuC,6BAAvC;AAEA,SAASC,SAAT,QAA0B,eAA1B;AAEA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,MAAP,MAAmB,qBAAnB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AAEA,SAASC,aAAT,QAA8B,iBAA9B;;AAGA,MAAMP,MAAiD,GAAG,CAAC;AACzDQ,EAAAA,IADyD;AAEzDC,EAAAA,KAFyD;AAGzDC,EAAAA,OAHyD;AAIzDC,EAAAA,WAJyD;AAKzDC,EAAAA,aALyD;AAMzDC,EAAAA,QAAQ,GAAG,KAN8C;AAOzDC,EAAAA,aAAa,GAAG,MAAM,CAAE,CAPiC;AAQzDC,EAAAA,KAAK,EAAE;AAAEC,IAAAA;AAAF,GARkD;AASzD,KAAGC;AATsD,CAAD,KAUpD;AAAA;;AACJ,QAAM;AACJC,IAAAA,UAAU,EAAE;AACVC,MAAAA,YADU;AACI;AACdC,MAAAA,WAFU;AAEG;AACbC,MAAAA,cAHU;AAGM;AAChBC,MAAAA,gBAJU;AAIQ;AAClBC,MAAAA,iBALU;AAKS;AACnBC,MAAAA,eANU;AAMO;AACjBC,MAAAA,WAPU;AAOG;AACbC,MAAAA,eARU;AAQO;AACjBC,MAAAA,OATU;AASD;AACTC,MAAAA,UAVU;AAUE;AACZC,MAAAA,YAXU;AAWI;AACdC,MAAAA,aAZU;AAYK;AACfC,MAAAA,WAbU;AAaG;AACb,SAAGb;AAdO;AADR,MAiBFX,aAAa,CAACE,KAAD,CAjBjB;AAmBA,QAAMuB,SAAS,GAAGrC,KAAK,CAACsC,MAAN,CAA2CC,SAA3C,CAAlB;AACA,QAAM,CAACC,aAAD,EAAgBC,kBAAhB,IAAsCzC,KAAK,CAAC0C,QAAN,CAAe,KAAf,CAA5C;;AAEA,QAAMC,gBAAgB,GAAG,MAAM;AAC7BF,IAAAA,kBAAkB,CAAC,CAACD,aAAF,CAAlB,CAD6B,CAE7B;;AACAH,IAAAA,SAAS,CAACO,OAAV,CAAkBC,WAAlB,GAH6B,CAGI;AAClC,GAJD;;AAMA,QAAMC,mBAAmB,GACvBhC,KAAK,IACLV,IAAI,CAACF,UAAU,CAAC6C,OAAX,CAAmBjC,KAAnB,CAAD,EAA4B,CAC9B,QAD8B,EAE9B,WAF8B,EAG9B,aAH8B,EAI9B,cAJ8B,EAK9B,YAL8B,CAA5B,CAFN;AAUA,QAAMkC,aAAa,GACjB/B,aAAa,6CACZF,OAAO,CAACkC,IAAR,CAAcC,CAAD,IAAOA,CAAC,CAACC,KAAF,KAAYlC,aAAhC,CADY,kDACZ,cAAgDmC,KADpC,qEAC6CnC,aAD7C,CADf;AAIA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACoC,MAAM,CAACC,SAAR,EAAmB/B,UAAnB;AAAb,kBACE,oBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEL,QAArB;AAA+B,IAAA,OAAO,EAAEyB;AAAxC,kBACE,oBAAC,SAAD,eACMrB,KADN;AAEE,IAAA,KAAK,EAAEiC,MAAM,CAACP,aAAD,CAFf;AAGE,IAAA,WAAW,EAAEhC,WAHf,CAIE;AAJF;AAKE,IAAA,GAAG,EAAEqB,SALP,CAKkB;AALlB;AAME,IAAA,QAAQ,EAAEnB,QANZ;AAOE,IAAA,aAAa,EAAC,MAPhB,CAQE;AARF;AASE,IAAA,KAAK,EAAE4B;AATT,KADF,CADF,EAcGN,aAAa,iBACZ,oBAAC,MAAD,qBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACa,MAAM,CAACG,MAAR,EAAgB;AAAEzB,MAAAA,eAAe,EAAEV,MAAM,CAACoC;AAA1B,KAAhB;AAAb,kBACE,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAEJ,MAAM,CAACK;AAA5B,kBACE,oBAAC,MAAD;AACE,IAAA,IAAI,EAAE7C,IADR;AAEE,IAAA,IAAI,EAAC,MAFP;AAGE,IAAA,OAAO,EAAE8B,gBAHX;AAIE,IAAA,KAAK,EAAEU,MAAM,CAACM;AAJhB,aADF,eASE,oBAAC,YAAD;AACE,IAAA,KAAK,EAAE;AAAE5B,MAAAA,eAAe,EAAE;AAAnB,KADT;AAEE,IAAA,aAAa,EAAEd,aAFjB;AAGE,IAAA,aAAa,EAAEE;AAHjB,KAKGJ,OAAO,CAAC6C,GAAR,CAAaV,CAAD,iBACX,oBAAC,YAAD,CAAc,IAAd;AACE,IAAA,KAAK,EAAEA,CAAC,CAACE,KADX;AAEE,IAAA,KAAK,EAAEF,CAAC,CAACC,KAFX;AAGE,IAAA,GAAG,EAAED,CAAC,CAACC;AAHT,IADD,CALH,CATF,CADF,CADF,CAfJ,CADF;AA8CD,CAnGD;;AAqGA,MAAME,MAAM,GAAGnD,UAAU,CAAC2D,MAAX,CAAkB;AAC/BP,EAAAA,SAAS,EAAE;AACTQ,IAAAA,SAAS,EAAE;AADF,GADoB;AAI/BN,EAAAA,MAAM,EAAE;AACNO,IAAAA,QAAQ,EAAE,UADJ;AAENC,IAAAA,MAAM,EAAE,CAFF;AAGNC,IAAAA,IAAI,EAAE,CAHA;AAINC,IAAAA,KAAK,EAAE,CAJD;AAKNC,IAAAA,aAAa,EAAE,KALT;AAMNC,IAAAA,cAAc,EAAE;AANV,GAJuB;AAY/BV,EAAAA,eAAe,EAAE;AACf3B,IAAAA,eAAe,EAAE,OADF;AAEfoC,IAAAA,aAAa,EAAE,QAFA;AAGfE,IAAAA,KAAK,EAAE;AAHQ,GAZc;AAiB/BV,EAAAA,WAAW,EAAE;AACXG,IAAAA,SAAS,EAAE;AADA;AAjBkB,CAAlB,CAAf;AAsBA,eAAevD,SAAS,CAACF,MAAD,CAAxB","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\nimport omit from \"lodash.omit\";\n\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport { withTheme } from \"../../theming\";\n\nimport Portal from \"../Portal/Portal\";\nimport Button from \"../DeprecatedButton\";\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\nimport { extractStyles } from \"../../utilities\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nconst Picker: React.FC<PickerComponentProps & IconSlot> = ({\n  Icon,\n  style,\n  options,\n  placeholder,\n  selectedValue,\n  disabled = false,\n  onValueChange = () => {},\n  theme: { colors },\n  ...props\n}) => {\n  const {\n    viewStyles: {\n      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...viewStyles\n    },\n  } = extractStyles(style);\n\n  const textField = React.useRef<typeof TextField | undefined>(undefined);\n  const [pickerVisible, setIsPickerVisible] = React.useState(false);\n\n  const toggleVisibility = () => {\n    setIsPickerVisible(!pickerVisible);\n    // @ts-ignore\n    textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n  };\n\n  const stylesWithoutMargin =\n    style &&\n    omit(StyleSheet.flatten(style), [\n      \"margin\",\n      \"marginTop\",\n      \"marginRight\",\n      \"marginBottom\",\n      \"marginLeft\",\n    ]);\n\n  const selectedLabel =\n    selectedValue &&\n    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);\n\n  return (\n    <View style={[styles.container, viewStyles]}>\n      <Touchable disabled={disabled} onPress={toggleVisibility}>\n        <TextField\n          {...props}\n          value={String(selectedLabel)}\n          placeholder={placeholder}\n          // @ts-ignore\n          ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n          disabled={disabled}\n          pointerEvents=\"none\"\n          // @ts-expect-error\n          style={stylesWithoutMargin}\n        />\n      </Touchable>\n      {pickerVisible && (\n        <Portal>\n          <View style={[styles.picker, { backgroundColor: colors.divider }]}>\n            <SafeAreaView style={styles.pickerContainer}>\n              <Button\n                Icon={Icon}\n                type=\"text\"\n                onPress={toggleVisibility}\n                style={styles.closeButton}\n              >\n                Close\n              </Button>\n              <NativePicker\n                style={{ backgroundColor: \"white\" }}\n                selectedValue={selectedValue}\n                onValueChange={onValueChange}\n              >\n                {options.map((o: any) => (\n                  <NativePicker.Item\n                    label={o.label}\n                    value={o.value}\n                    key={o.value}\n                  />\n                ))}\n              </NativePicker>\n            </SafeAreaView>\n          </View>\n        </Portal>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: \"stretch\",\n  },\n  picker: {\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    flexDirection: \"row\",\n    justifyContent: \"center\",\n  },\n  pickerContainer: {\n    backgroundColor: \"white\",\n    flexDirection: \"column\",\n    width: \"100%\",\n  },\n  closeButton: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nexport default withTheme(Picker);\n"]}

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

@@ -1,7 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import * as React from "react";
-import { View, StyleSheet, Picker as NativePicker } from "react-native";
+import { View, StyleSheet } from "react-native";
+import { Picker as NativePicker } from "@react-native-picker/picker";
 import omit from "lodash.omit";
 import { withTheme } from "../../theming";
 import { extractStyles } from "../../utilities";
@@ -65,7 +66,7 @@ const Picker = ({
   };
 
   const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
-  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(opt => opt.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
+  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
   return /*#__PURE__*/React.createElement(Touchable, {
     disabled: disabled,
     onPress: toggleFocus,
@@ -73,7 +74,7 @@ const Picker = ({
   }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(NativePicker, {
     enabled: !disabled,
     selectedValue: selectedValue,
-    onValueChange: (value, index) => onValueChange(value.toString(), index),
+    onValueChange: onValueChange,
     style: {
       flex: 1,
       opacity: 0,
@@ -81,7 +82,8 @@ const Picker = ({
       top: 0,
       left: 0,
       right: 0,
-      bottom: 0
+      bottom: 0,
+      width: "100%"
     }
   }, options.map(o => /*#__PURE__*/React.createElement(NativePicker.Item, {
     label: o.label,

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

@@ -1 +1 @@
-{"version":3,"sources":["PickerComponent.web.tsx"],"names":["React","View","StyleSheet","Picker","NativePicker","omit","withTheme","extractStyles","TextField","Touchable","style","options","placeholder","selectedValue","disabled","onValueChange","onValueChangeOverride","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","useRef","undefined","itemValue","itemIndex","toggleFocus","current","stylesWithoutMargin","flatten","selectedLabel","find","opt","value","label","styles","container","index","toString","flex","opacity","position","top","left","right","bottom","map","o","create","alignSelf"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet, Picker as NativePicker } from \"react-native\";\nimport omit from \"lodash.omit\";\nimport { withTheme } from \"../../theming\";\nimport { extractStyles } from \"../../utilities\";\n\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\n\nconst Picker: React.FC<PickerComponentProps> = ({\n  style,\n  options,\n  placeholder,\n  selectedValue,\n  disabled = false,\n  onValueChange: onValueChangeOverride = () => {},\n  ...props\n}) => {\n  const {\n    viewStyles: {\n      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...viewStyles\n    },\n  } = extractStyles(style);\n\n  const textField = React.useRef<typeof TextField | undefined>(undefined);\n\n  const onValueChange = (itemValue: string, itemIndex: number) => {\n    toggleFocus();\n    onValueChangeOverride(itemValue, itemIndex);\n  };\n\n  const toggleFocus = () => {\n    if (!disabled) {\n      // @ts-ignore\n      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n    }\n  };\n\n  const stylesWithoutMargin =\n    style &&\n    omit(StyleSheet.flatten(style), [\n      \"margin\",\n      \"marginTop\",\n      \"marginRight\",\n      \"marginBottom\",\n      \"marginLeft\",\n    ]);\n\n  const selectedLabel =\n    selectedValue &&\n    (options.find((opt) => opt.value === selectedValue)?.label ??\n      selectedValue);\n\n  return (\n    <Touchable\n      disabled={disabled}\n      onPress={toggleFocus}\n      style={[styles.container, viewStyles]}\n    >\n      <View>\n        <NativePicker\n          enabled={!disabled}\n          selectedValue={selectedValue}\n          onValueChange={(value, index) =>\n            onValueChange(value.toString(), index)\n          }\n          style={{\n            flex: 1,\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n          }}\n        >\n          {options.map((o) => (\n            <NativePicker.Item label={o.label} value={o.value} key={o.value} />\n          ))}\n        </NativePicker>\n        <View pointerEvents=\"none\">\n          <TextField\n            {...props}\n            value={selectedLabel}\n            placeholder={placeholder}\n            // @ts-ignore\n            ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n            disabled={disabled}\n            // @ts-expect-error\n            style={stylesWithoutMargin}\n          />\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: \"stretch\",\n  },\n});\n\nexport default withTheme(Picker);\n"]}
+{"version":3,"sources":["PickerComponent.web.tsx"],"names":["React","View","StyleSheet","Picker","NativePicker","omit","withTheme","extractStyles","TextField","Touchable","style","options","placeholder","selectedValue","disabled","onValueChange","onValueChangeOverride","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","useRef","undefined","itemValue","itemIndex","toggleFocus","current","stylesWithoutMargin","flatten","selectedLabel","find","o","value","label","styles","container","flex","opacity","position","top","left","right","bottom","width","map","create","alignSelf"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\nimport omit from \"lodash.omit\";\nimport { withTheme } from \"../../theming\";\nimport { extractStyles } from \"../../utilities\";\n\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\n\nconst Picker: React.FC<PickerComponentProps> = ({\n  style,\n  options,\n  placeholder,\n  selectedValue,\n  disabled = false,\n  onValueChange: onValueChangeOverride = () => {},\n  ...props\n}) => {\n  const {\n    viewStyles: {\n      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...viewStyles\n    },\n  } = extractStyles(style);\n\n  const textField = React.useRef<typeof TextField | undefined>(undefined);\n\n  const onValueChange = (itemValue: string, itemIndex: number) => {\n    toggleFocus();\n    onValueChangeOverride(itemValue, itemIndex);\n  };\n\n  const toggleFocus = () => {\n    if (!disabled) {\n      // @ts-ignore\n      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n    }\n  };\n\n  const stylesWithoutMargin =\n    style &&\n    omit(StyleSheet.flatten(style), [\n      \"margin\",\n      \"marginTop\",\n      \"marginRight\",\n      \"marginBottom\",\n      \"marginLeft\",\n    ]);\n\n  const selectedLabel =\n    selectedValue &&\n    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);\n\n  return (\n    <Touchable\n      disabled={disabled}\n      onPress={toggleFocus}\n      style={[styles.container, viewStyles]}\n    >\n      <View>\n        <NativePicker\n          enabled={!disabled}\n          selectedValue={selectedValue}\n          onValueChange={onValueChange}\n          style={{\n            flex: 1,\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            width: \"100%\",\n          }}\n        >\n          {options.map((o) => (\n            <NativePicker.Item label={o.label} value={o.value} key={o.value} />\n          ))}\n        </NativePicker>\n        <View pointerEvents=\"none\">\n          <TextField\n            {...props}\n            value={selectedLabel}\n            placeholder={placeholder}\n            // @ts-ignore\n            ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n            disabled={disabled}\n            // @ts-expect-error\n            style={stylesWithoutMargin}\n          />\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: \"stretch\",\n  },\n});\n\nexport default withTheme(Picker);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "42.2.2",
+  "version": "42.2.3-428e28.0+428e28ba",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -45,6 +45,7 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.0.0-rc.3",
+    "@react-native-picker/picker": "^2.1.0",
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
@@ -57,7 +58,7 @@
   },
   "devDependencies": {
     "@react-native-community/datetimepicker": "~3.0.0",
-    "@react-native-picker/picker": "^1.9.11",
+    "@react-native-picker/picker": "^2.1.0",
     "@types/color": "^3.0.1",
     "@types/dateformat": "^3.0.1",
     "@types/lodash.isnumber": "^3.0.6",
@@ -73,7 +74,7 @@
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": "~3.0.0",
-    "@react-native-picker/picker": "^1.9.11",
+    "@react-native-picker/picker": "^2.1.0",
     "react": "*",
     "react-native": "*",
     "react-native-modal-datetime-picker": "^10.0.0",
@@ -94,5 +95,5 @@
       ]
     ]
   },
-  "gitHead": "d52e3f867c8d5288b413b7e092ee68a598c74f5d"
+  "gitHead": "428e28ba225454d8f4c88f18083363675e41252f"
 }

package/src/components/Picker/Picker.js

@@ -11,11 +11,16 @@ function normalizeOptions(options) {
     if (typeof options[0] === "string") {
         return options.map((option) => ({
             label: option,
-            value: option,
+            value: String(option),
         }));
     }
     if (options[0].label && options[0].value) {
-        return options;
+        return options.map((option) => {
+            return {
+                label: option.label,
+                value: String(option.value),
+            };
+        });
     }
     throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
 }
@@ -24,23 +29,24 @@ const Picker = ({ options = [], placeholder, onValueChange: onValueChangeOverrid
         if (placeholder && itemIndex === 0) {
             return;
         }
-        onValueChangeOverride && onValueChangeOverride(itemValue, itemIndex);
+        onValueChangeOverride &&
+            onValueChangeOverride(String(itemValue), itemIndex);
     }, [placeholder, onValueChangeOverride]);
     const normalizedOptions = normalizeOptions(options);
     const previousInitialValue = usePrevious(initialValue);
     React.useEffect(() => {
-        if (initialValue !== previousInitialValue) {
+        if (String(initialValue) !== String(previousInitialValue)) {
             const index = normalizedOptions.findIndex((opt) => opt.value === initialValue);
             if (index == null) {
                 return;
             }
-            onValueChange(initialValue, index);
+            onValueChange(String(initialValue), index);
         }
     }, [initialValue, previousInitialValue, normalizedOptions, onValueChange]);
     const pickerOptions = placeholder
         ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
         : normalizedOptions;
-    return (React.createElement(PickerComponent, { ...props, selectedValue: value, placeholder: placeholder, options: pickerOptions, onValueChange: onValueChange }));
+    return (React.createElement(PickerComponent, { ...props, selectedValue: String(value), placeholder: placeholder, options: pickerOptions, onValueChange: onValueChange }));
 };
 export default withTheme(Picker);
 const SEED_DATA_PROPS = {

package/src/components/Picker/Picker.tsx

@@ -28,12 +28,17 @@ function normalizeOptions(options: Props["options"]): PickerOption[] {
   if (typeof options[0] === "string") {
     return (options as string[]).map((option) => ({
       label: option,
-      value: option,
+      value: String(option),
     }));
   }
 
   if (options[0].label && options[0].value) {
-    return options as PickerOption[];
+    return options.map((option) => {
+      return {
+        label: option.label,
+        value: String(option.value),
+      };
+    });
   }
 
   throw new Error(
@@ -54,7 +59,8 @@ const Picker: React.FC<Props> = ({
       if (placeholder && itemIndex === 0) {
         return;
       }
-      onValueChangeOverride && onValueChangeOverride(itemValue, itemIndex);
+      onValueChangeOverride &&
+        onValueChangeOverride(String(itemValue), itemIndex);
     },
     [placeholder, onValueChangeOverride]
   );
@@ -63,7 +69,7 @@ const Picker: React.FC<Props> = ({
 
   const previousInitialValue = usePrevious(initialValue);
   React.useEffect(() => {
-    if (initialValue !== previousInitialValue) {
+    if (String(initialValue) !== String(previousInitialValue)) {
       const index = normalizedOptions.findIndex(
         (opt) => opt.value === initialValue
       );
@@ -72,7 +78,7 @@ const Picker: React.FC<Props> = ({
         return;
       }
 
-      onValueChange(initialValue, index);
+      onValueChange(String(initialValue), index);
     }
   }, [initialValue, previousInitialValue, normalizedOptions, onValueChange]);
 
@@ -83,7 +89,7 @@ const Picker: React.FC<Props> = ({
   return (
     <PickerComponent
       {...props}
-      selectedValue={value}
+      selectedValue={String(value)}
       placeholder={placeholder}
       options={pickerOptions}
       onValueChange={onValueChange}

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

@@ -41,17 +41,17 @@ const Picker = ({ style, options, placeholder, selectedValue, disabled = false,
             "marginLeft",
         ]);
     const selectedLabel = selectedValue &&
-        (options.find((opt) => opt.value === selectedValue)?.label ??
-            selectedValue);
+        (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
     return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
         React.createElement(View, null,
-            React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: (value, index) => onValueChange(value.toString(), index), style: {
+            React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: onValueChange, style: {
                     opacity: 0,
                     position: "absolute",
                     top: 0,
                     left: 0,
                     right: 0,
                     bottom: 0,
+                    width: "100%",
                 } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder, 

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

@@ -63,8 +63,7 @@ const Picker: React.FC<PickerComponentProps> = ({
 
   const selectedLabel =
     selectedValue &&
-    (options.find((opt) => opt.value === selectedValue)?.label ??
-      selectedValue);
+    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
 
   return (
     <Touchable
@@ -76,9 +75,7 @@ const Picker: React.FC<PickerComponentProps> = ({
         <NativePicker
           enabled={!disabled}
           selectedValue={selectedValue}
-          onValueChange={(value, index) =>
-            onValueChange(value.toString(), index)
-          }
+          onValueChange={onValueChange}
           style={{
             opacity: 0,
             position: "absolute",
@@ -86,6 +83,7 @@ const Picker: React.FC<PickerComponentProps> = ({
             left: 0,
             right: 0,
             bottom: 0,
+            width: "100%",
           }}
         >
           {options.map((o) => (

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

@@ -39,9 +39,11 @@ const Picker = ({ Icon, style, options, placeholder, selectedValue, disabled = f
             "marginBottom",
             "marginLeft",
         ]);
+    const selectedLabel = selectedValue &&
+        (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
     return (React.createElement(View, { style: [styles.container, viewStyles] },
         React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
-            React.createElement(TextField, { ...props, value: selectedValue, placeholder: placeholder, 
+            React.createElement(TextField, { ...props, value: String(selectedLabel), placeholder: placeholder, 
                 // @ts-ignore
                 ref: textField, disabled: disabled, pointerEvents: "none", 
                 // @ts-expect-error
@@ -50,7 +52,7 @@ const Picker = ({ Icon, style, options, placeholder, selectedValue, disabled = f
             React.createElement(View, { style: [styles.picker, { backgroundColor: colors.divider }] },
                 React.createElement(SafeAreaView, { style: styles.pickerContainer },
                     React.createElement(Button, { Icon: Icon, type: "text", onPress: toggleVisibility, style: styles.closeButton }, "Close"),
-                    React.createElement(NativePicker, { selectedValue: selectedValue, onValueChange: (value, index) => onValueChange(value.toString(), index) }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value }))))))))));
+                    React.createElement(NativePicker, { style: { backgroundColor: "white" }, selectedValue: selectedValue, onValueChange: onValueChange }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value }))))))))));
 };
 const styles = StyleSheet.create({
     container: {
@@ -64,7 +66,11 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         justifyContent: "center",
     },
-    pickerContainer: { flexDirection: "column", width: "100%" },
+    pickerContainer: {
+        backgroundColor: "white",
+        flexDirection: "column",
+        width: "100%",
+    },
     closeButton: {
         alignSelf: "flex-end",
     },

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

@@ -64,12 +64,16 @@ const Picker: React.FC<PickerComponentProps & IconSlot> = ({
       "marginLeft",
     ]);
 
+  const selectedLabel =
+    selectedValue &&
+    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
+
   return (
     <View style={[styles.container, viewStyles]}>
       <Touchable disabled={disabled} onPress={toggleVisibility}>
         <TextField
           {...props}
-          value={selectedValue}
+          value={String(selectedLabel)}
           placeholder={placeholder}
           // @ts-ignore
           ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
@@ -92,10 +96,9 @@ const Picker: React.FC<PickerComponentProps & IconSlot> = ({
                 Close
               </Button>
               <NativePicker
+                style={{ backgroundColor: "white" }}
                 selectedValue={selectedValue}
-                onValueChange={(value, index) =>
-                  onValueChange(value.toString(), index)
-                }
+                onValueChange={onValueChange}
               >
                 {options.map((o: any) => (
                   <NativePicker.Item
@@ -125,7 +128,11 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "center",
   },
-  pickerContainer: { flexDirection: "column", width: "100%" },
+  pickerContainer: {
+    backgroundColor: "white",
+    flexDirection: "column",
+    width: "100%",
+  },
   closeButton: {
     alignSelf: "flex-end",
   },

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { View, StyleSheet, Picker as NativePicker } from "react-native";
+import { View, StyleSheet } from "react-native";
+import { Picker as NativePicker } from "@react-native-picker/picker";
 import omit from "lodash.omit";
 import { withTheme } from "../../theming";
 import { extractStyles } from "../../utilities";
@@ -40,11 +41,10 @@ const Picker = ({ style, options, placeholder, selectedValue, disabled = false,
             "marginLeft",
         ]);
     const selectedLabel = selectedValue &&
-        (options.find((opt) => opt.value === selectedValue)?.label ??
-            selectedValue);
+        (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
     return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
         React.createElement(View, null,
-            React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: (value, index) => onValueChange(value.toString(), index), style: {
+            React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: onValueChange, style: {
                     flex: 1,
                     opacity: 0,
                     position: "absolute",
@@ -52,6 +52,7 @@ const Picker = ({ style, options, placeholder, selectedValue, disabled = false,
                     left: 0,
                     right: 0,
                     bottom: 0,
+                    width: "100%",
                 } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder, 

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { View, StyleSheet, Picker as NativePicker } from "react-native";
+import { View, StyleSheet } from "react-native";
+import { Picker as NativePicker } from "@react-native-picker/picker";
 import omit from "lodash.omit";
 import { withTheme } from "../../theming";
 import { extractStyles } from "../../utilities";
@@ -62,8 +63,7 @@ const Picker: React.FC<PickerComponentProps> = ({
 
   const selectedLabel =
     selectedValue &&
-    (options.find((opt) => opt.value === selectedValue)?.label ??
-      selectedValue);
+    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
 
   return (
     <Touchable
@@ -75,9 +75,7 @@ const Picker: React.FC<PickerComponentProps> = ({
         <NativePicker
           enabled={!disabled}
           selectedValue={selectedValue}
-          onValueChange={(value, index) =>
-            onValueChange(value.toString(), index)
-          }
+          onValueChange={onValueChange}
           style={{
             flex: 1,
             opacity: 0,
@@ -86,6 +84,7 @@ const Picker: React.FC<PickerComponentProps> = ({
             left: 0,
             right: 0,
             bottom: 0,
+            width: "100%",
           }}
         >
           {options.map((o) => (