fix applying Dropdown and MultiSelect selector styles (#1077)

Author: anserwaseem

.changeset/thin-horses-breathe.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+fix applying Dropdown and MultiSelect selector styles

apps/kitchen-sink/src/ensemble/screens/widgets.yaml

@@ -775,9 +775,9 @@ View:
                   label: Choose multiple
                   id: multiSelect1
                   styles:
-                    multiSelectBackgroundColor: "aqua"
-                    multiSelectBorderWidth: 1
-                    multiSelectBorderColor: "lime"
+                    multiSelectBackgroundColor: "khaki"
+                    multiSelectBorderWidth: 4px
+                    multiSelectBorderColor: "red"
                     multiSelectPadding: 10px
                     multiSelectMaxWidth: 200px
                     backgroundColor: "yellow"
@@ -802,6 +802,7 @@ View:
                     - label: Option 3
                       value: option3
               - Dropdown:
+                  id: myDropdown123
                   label: Simple
                   hintText: Hint Text
                   styles:
@@ -810,6 +811,8 @@ View:
                     dropdownPadding: 10px
                     dropdownMaxWidth: 200px
                     dropdownMinHeight: 50px
+                    dropdownBackgroundColor: "red"
+                    backgroundColor: "yellow"
                   items:
                     - label: Option 1
                       value: 1
@@ -835,6 +838,9 @@ View:
               - Dropdown:
                   value: 11
                   label: With item template
+                  styles:
+                    dropdownBackgroundColor: aqua
+                    backgroundColor: purple
                   labelStyle:
                     color: green
                     fontSize: 20

packages/runtime/src/shared/styles.ts

@@ -1,8 +1,8 @@
 import * as Icons from "@mui/icons-material";
 import type { SvgIconComponent } from "@mui/icons-material";
 import { get, isInteger } from "lodash-es";
-import React from "react";
-import { TextAlignment } from "./styleSchema";
+import type React from "react";
+import type { TextAlignment } from "./styleSchema";
 
 type Color = number | string;
 
@@ -105,6 +105,7 @@ export const getComponentStyles = (
   name: string,
   styles?: React.CSSProperties,
   returnAsString = true,
+  addImportant = false,
 ): string | React.CSSProperties => {
   const styleNames = Object.keys(styles || {}).filter((key) =>
     key.startsWith(name),
@@ -120,8 +121,11 @@ export const getComponentStyles = (
         // eslint-disable-next-line prefer-named-capture-group
         .replace(/([a-z])([A-Z])/g, "$1-$2")
         .toLowerCase(); // convert camelCase to kebab-case
-      result += `${cssProperty}: ${styleValue};`;
-      res = { ...res, [cssProperty]: styleValue };
+      result += `${cssProperty}: ${styleValue}${addImportant ? " !important" : ""};`;
+      res = {
+        ...res,
+        [cssProperty]: `${styleValue}${addImportant ? " !important" : ""}`,
+      };
     }
   });
 

packages/runtime/src/widgets/Form/Dropdown.tsx

@@ -72,7 +72,7 @@ const DropdownRenderer = (
   return (
     <>
       {menu}
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
         onMouseDown={(e) => {
           e.preventDefault();
@@ -236,7 +236,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
           height: unset !important;
         }
         .${id}_input .ant-select-selector {
-          ${getComponentStyles("dropdown", values?.styles) as string}
+          ${getComponentStyles("dropdown", values?.styles, true, true) as string}
         }
         .ant-select-item.ant-select-item-option.${id}_option[aria-selected="true"] {
           ${

packages/runtime/src/widgets/Form/MultiSelect.tsx

@@ -286,7 +286,7 @@ const MultiSelect: React.FC<MultiSelectProps> = (props) => {
     <>
       <style>{`
         .${id}_input .ant-select-selector {
-          ${getComponentStyles("multiSelect", values?.styles) as string}
+          ${getComponentStyles("multiSelect", values?.styles, true, true) as string}
         }
         .ant-select-item.ant-select-item-option.${id}_option[aria-selected="true"]
         {