update reference selector & bump version

Author: Wesley

package.json

@@ -1,6 +1,6 @@
 {
     "name": "atlas-ui-framework",
-    "version": "2.5.6",
+    "version": "2.5.7",
     "description": "Mendix Atlas UI is the foundation of making beautiful apps with Mendix. For more information about the framework go to https://atlas.mendix.com.",
     "main": "",
     "scripts": {

styles/native/js/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.5.6"
-}
+    "version": "2.5.7"
+}

styles/native/ts/core/widgets/referenceselector.ts

@@ -1,7 +1,7 @@
-import { input }                    from "../variables";
-import { DropDown }                 from "./dropdown.js";
-import { TextBox, TextBoxVertical } from "./textbox";
-import { DropDownType }             from "../../types/widgets";
+import { border, contrast, font, input } from "../variables";
+import { DropDown }                      from "./dropdown";
+import { TextBox, TextBoxVertical }      from "./textbox";
+import { DropDownType }                  from "../../types/widgets";
 /*
 
 DISCLAIMER:
@@ -23,22 +23,8 @@ export const ReferenceSelector: DropDownType = {
         // numberOfLines and all TextStyle properties are allowed
         ...TextBox.label,
     },
-    pickerIOS: {
-        // All ViewStyle properties are allowed
-        backgroundColor: input.backgroundColor,
-    },
-    pickerItemIOS: {
-        // All TextStyle properties are allowed
-    },
-    pickerBackdropIOS: {
-        // All ViewStyle properties are allowed
-    },
-    pickerTopIOS: {
-        // All ViewStyle properties are allowed
-        backgroundColor: input.backgroundColor,
-    },
     value: {
-        // All TextStyle properties are allowed
+        // All TextStyle properties & placeholderTextColor are allowed
         color: input.color,
         borderColor: input.borderColor,
         backgroundColor: input.backgroundColor,
@@ -48,8 +34,11 @@ export const ReferenceSelector: DropDownType = {
         borderWidth: input.borderWidth,
         borderRadius: input.borderRadius,
 
+        overflow: "hidden",
         paddingHorizontal: input.paddingHorizontal,
         paddingVertical: input.paddingVertical,
+
+        placeholderTextColor: input.placeholderTextColor, // Only applied when useUniformDesign is true
     },
     valueDisabled: {
         // All TextStyle properties are allowed
@@ -59,14 +48,68 @@ export const ReferenceSelector: DropDownType = {
         // All TextStyle properties are allowed
         ...TextBox.validationMessage,
     },
+    /*  New dropdown styles start */
+    valueContainer: {
+        // All ViewStyle properties & rippleColor are allowed
+    },
+    menuWrapper: {
+        // All ViewStyle properties are allowed
+        borderRadius: border.radius,
+        shadowColor: "#000",
+        shadowOpacity: 0.2,
+        shadowRadius: 10,
+        elevation: 16,
+    },
+    itemContainer: {
+        // All ViewStyle properties are allowed
+        maxWidth: 500,
+        paddingVertical: 6,
+        paddingHorizontal: 16,
+        backgroundColor: input.backgroundColor,
+    },
+    item: {
+        // All TextStlye properties are allowed
+        color: input.color,
+    },
+    selectedItem: {
+        // All TextStlye properties are allowed
+        fontWeight: font.weightBold,
+    },
+    selectedItemContainer: {
+        // All ViewStyle properties are allowed
+        backgroundColor: contrast.lowest,
+    },
+    /*  New dropdown styles end */
+    useUniformDesign: true,
+    /*  Old dropdown styles start */
+    pickerIOS: {
+        // All ViewStyle properties are allowed
+        backgroundColor: input.backgroundColor,
+    },
+    pickerItemIOS: {
+        // All TextStyle properties are allowed
+    },
+    pickerBackdropIOS: {
+        // All ViewStyle properties are allowed
+    },
+    pickerTopIOS: {
+        // All ViewStyle properties are allowed
+        backgroundColor: input.backgroundColor,
+    },
+    /*  Old dropdown styles start */
 };
 export const ReferenceSelectorVertical: DropDownType = {
     container: TextBoxVertical.container,
     label: TextBoxVertical.label,
-    pickerIOS: ReferenceSelector.pickerIOS,
-    pickerItemIOS: ReferenceSelector.pickerItemIOS,
-    pickerBackdropIOS: ReferenceSelector.pickerBackdropIOS,
-    pickerTopIOS: ReferenceSelector.pickerTopIOS,
     value: DropDown.value,
     validationMessage: TextBoxVertical.validationMessage,
+    valueContainer: DropDown.valueContainer,
+    menuWrapper: DropDown.menuWrapper,
+    itemContainer: DropDown.itemContainer,
+    item: DropDown.item,
+    useUniformDesign: DropDown.useUniformDesign,
+    pickerIOS: DropDown.pickerIOS,
+    pickerItemIOS: DropDown.pickerItemIOS,
+    pickerBackdropIOS: DropDown.pickerBackdropIOS,
+    pickerTopIOS: DropDown.pickerTopIOS,
 };

styles/web/sass/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.5.6"
+    "version": "2.5.7"
 }