fix: menu min width, size typing and filter select picker

Author: eshankvaish

src/Shared/Components/SelectPicker/FilterSelectPicker.tsx

@@ -2,21 +2,20 @@
  * Copyright (c) 2024. Devtron Inc.
  */
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import SelectPicker from './SelectPicker.component'
-import { FilterSelectPickerProps, SelectPickerProps } from './type'
+import { FilterSelectPickerProps, SelectPickerOptionType, SelectPickerProps } from './type'
 
-const FilterSelectPicker = ({ appliedFilterOptions, handleApplyFilter, ...props }: FilterSelectPickerProps) => {
+const FilterSelectPicker = ({
+    appliedFilterOptions,
+    handleApplyFilter,
+    options,
+    ...props
+}: FilterSelectPickerProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState(false)
-    const [selectedOptions, setSelectedOptions] = useState<FilterSelectPickerProps['options']>()
-
-    const resetSelectedOptions = () => {
-        setSelectedOptions(structuredClone(appliedFilterOptions))
-    }
-
-    useEffect(() => {
-        resetSelectedOptions()
-    }, [appliedFilterOptions])
+    const [selectedOptions, setSelectedOptions] = useState<SelectPickerOptionType[]>(
+        structuredClone(appliedFilterOptions ?? []),
+    )
 
     const openMenu = () => {
         setIsMenuOpen(true)
@@ -32,7 +31,7 @@ const FilterSelectPicker = ({ appliedFilterOptions, handleApplyFilter, ...props
 
     const handleMenuClose = () => {
         closeMenu()
-        resetSelectedOptions()
+        setSelectedOptions(structuredClone(appliedFilterOptions ?? []))
     }
 
     const handleApplyClick = () => {
@@ -54,17 +53,21 @@ const FilterSelectPicker = ({ appliedFilterOptions, handleApplyFilter, ...props
     )
 
     return (
-        <div>
-            <SelectPicker
-                {...props}
-                isMulti
-                menuIsOpen={isMenuOpen}
-                onMenuOpen={openMenu}
-                onMenuClose={handleMenuClose}
-                onChange={handleSelectOnChange}
-                renderMenuListFooter={renderApplyButton}
-            />
-        </div>
+        <SelectPicker
+            {...props}
+            options={options}
+            value={selectedOptions}
+            isMulti
+            menuIsOpen={isMenuOpen}
+            onMenuOpen={openMenu}
+            onMenuClose={handleMenuClose}
+            onChange={handleSelectOnChange}
+            renderMenuListFooter={renderApplyButton}
+            controlShouldRenderValue={false}
+            showSelectedOptionsCount
+            isSearchable
+            isClearable={false}
+        />
     )
 }
 

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -207,7 +207,7 @@ const SelectPicker = ({
     } = multiSelectProps
 
     // Only large variant is supported for multi select picker
-    const selectSize = isMulti && !controlShouldRenderValue ? ComponentSizeType.large : size
+    const selectSize = isMulti && controlShouldRenderValue ? ComponentSizeType.large : size
     const shouldShowSelectedOptionIcon = !isMulti && showSelectedOptionIcon
     const isSelectSearchable = !shouldRenderCustomOptions && isSearchable
 
@@ -249,7 +249,7 @@ const SelectPicker = ({
                 shouldRenderCustomOptions={shouldRenderCustomOptions}
             />
         ),
-        [shouldRenderCustomOptions],
+        [shouldRenderCustomOptions, renderMenuListFooter, renderCustomOptions],
     )
 
     const renderValueContainer = useCallback(

src/Shared/Components/SelectPicker/type.ts

@@ -199,5 +199,5 @@ export interface FilterSelectPickerProps
     extends Required<Pick<SelectPickerProps, 'options' | 'isDisabled' | 'placeholder' | 'isLoading'>>,
         Pick<SelectPickerProps, 'selectRef' | 'inputId' | 'menuPosition' | 'autoFocus'> {
     appliedFilterOptions: SelectPickerProps['options']
-    handleApplyFilter: (filtersToApply: SelectPickerProps['options']) => void
+    handleApplyFilter: (filtersToApply: SelectPickerOptionType[]) => void
 }

src/Shared/Components/SelectPicker/utils.ts

@@ -93,6 +93,7 @@ export const getCommonSelectStyle = ({
         border: '1px solid var(--N200)',
         boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.20)',
         width: getMenuWidthFromSize(menuSize),
+        minWidth: '200px',
         zIndex: 'var(--select-picker-menu-index)',
         ...(getVariantOverrides(variant)?.menu(base, state) || {}),
     }),