fix: rjsf styling for select

Author: eshankvaish

src/Common/RJSF/utils.tsx

@@ -30,74 +30,6 @@ export const translateString = (stringToTranslate: TranslatableString, params?:
     }
 }
 
-export const getCommonSelectStyle = (styleOverrides = {}) => ({
-    menuList: (base) => ({
-        ...base,
-        paddingTop: 0,
-        paddingBottom: 0,
-        cursor: 'pointer',
-    }),
-    control: (base, state) => ({
-        ...base,
-        minHeight: '32px',
-        boxShadow: 'none',
-        backgroundColor: 'var(--bg-secondary)',
-        border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)',
-        cursor: 'pointer',
-    }),
-    option: (base, state) => ({
-        ...base,
-        color: 'var(--N900)',
-        backgroundColor: state.isFocused ? 'var(--N100)' : 'var(--bg-primary)',
-        padding: '10px 12px',
-        cursor: 'pointer',
-    }),
-    dropdownIndicator: (base, state) => ({
-        ...base,
-        color: 'var(--N400)',
-        padding: '0 8px',
-        transition: 'all .2s ease',
-        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-    }),
-    valueContainer: (base, state) => ({
-        ...base,
-        padding: '0 8px',
-        fontWeight: '400',
-        color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color,
-    }),
-    loadingMessage: (base) => ({
-        ...base,
-        color: 'var(--N600)',
-    }),
-    noOptionsMessage: (base) => ({
-        ...base,
-        color: 'var(--N600)',
-    }),
-    multiValue: (base) => ({
-        ...base,
-        border: `1px solid var(--N200)`,
-        borderRadius: `4px`,
-        background: 'var(--bg-primary)',
-        height: '28px',
-        marginRight: '8px',
-        padding: '2px',
-        fontSize: '12px',
-    }),
-    singleValue: (base) => ({
-        ...base,
-        color: 'var(--N900)',
-    }),
-    input: (base) => ({
-        ...base,
-        color: 'var(--N900)',
-    }),
-    menu: (base) => ({
-        ...base,
-        backgroundColor: 'var(--bg-menu)',
-    }),
-    ...styleOverrides,
-})
-
 /**
  * Returns the redirection props for a url
  */

src/Common/RJSF/widgets/Select.tsx

@@ -14,16 +14,13 @@
  * limitations under the License.
  */
 
-import React from 'react'
 import { WidgetProps } from '@rjsf/utils'
 import ReactSelect, { MenuListProps, components } from 'react-select'
 import { PLACEHOLDERS } from '../constants'
-import { getCommonSelectStyle } from '../utils'
 
 import { ReactComponent as ArrowDown } from '../../../Assets/Icon/ic-chevron-down.svg'
 import { deepEqual } from '@Common/Helper'
-
-const commonStyles = getCommonSelectStyle()
+import { commonSelectStyles } from '@Shared/Components'
 
 const MenuList = ({ children, ...props }: MenuListProps) => (
     <components.MenuList {...props}>{Array.isArray(children) ? children.slice(0, 20) : children}</components.MenuList>
@@ -75,10 +72,10 @@ export const SelectWidget = (props: WidgetProps) => {
             placeholder={placeholder || PLACEHOLDERS.SELECT}
             isDisabled={disabled || readonly}
             styles={{
-                ...commonStyles,
+                ...commonSelectStyles,
                 control: (base, state) => ({
-                    ...commonStyles.control(base, state),
-                    height: '36px'
+                    ...commonSelectStyles.control(base, state),
+                    height: '36px',
                 }),
             }}
             components={{

src/Shared/Components/ReactSelect/utils.tsx

@@ -16,13 +16,13 @@
 
 import { cloneElement } from 'react'
 import Tippy from '@tippyjs/react'
-import { components, MenuListProps, ValueContainerProps } from 'react-select'
+import { components, MenuListProps, StylesConfig, ValueContainerProps } from 'react-select'
 import { OptionType, Progressing, stopPropagation } from '../../../Common'
 import { ReactComponent as ICSearch } from '../../../Assets/Icon/ic-search.svg'
 import { ReactComponent as ICFilter } from '../../../Assets/Icon/ic-filter.svg'
 import { ReactComponent as ICFilterApplied } from '../../../Assets/Icon/ic-filter-applied.svg'
 
-export const getCommonSelectStyle = (styleOverrides = {}) => ({
+export const getCommonSelectStyle = (styleOverrides = {}): StylesConfig => ({
     container: (base, state) => ({
         ...base,
         ...(state.isDisabled && {
@@ -128,6 +128,28 @@ export const getCommonSelectStyle = (styleOverrides = {}) => ({
         ...base,
         backgroundColor: 'var(--bg-menu)',
     }),
+    multiValue: (base) => ({
+        ...base,
+        background: 'var(--bg-primary)',
+        border: '1px solid var(--N200)',
+        borderRadius: '4px',
+        padding: '1px 5px',
+        maxWidth: '250px',
+        margin: 0,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px',
+    }),
+    multiValueLabel: (base) => ({
+        ...base,
+        borderRadius: 0,
+        color: 'var(--N900)',
+        fontSize: '12px',
+        fontWeight: 400,
+        lineHeight: '20px',
+        padding: 0,
+        paddingLeft: 0,
+    }),
     ...styleOverrides,
 })