Merge pull request #272 from devtron-labs/fix/select-picker-types

fix: typing for select picker and menu list renderer

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.19",
+    "version": "0.2.20",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -47,9 +47,9 @@ const FilterSelectPicker = ({
         setSelectedOptions(structuredClone(appliedFilterOptions ?? []))
     }
 
-    const renderApplyButton = (optionsSelected: Parameters<FilterSelectPickerProps['handleApplyFilter']>[0]) => {
+    const renderApplyButton = () => {
         const handleApplyClick = () => {
-            handleApplyFilter(optionsSelected)
+            handleApplyFilter(selectedOptions)
             closeMenu()
         }
 

src/Shared/Components/SelectPicker/FilterSelectPicker.tsx

@@ -181,7 +181,7 @@ import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } fr
  * />
  * ```
  */
-const SelectPicker = <OptionValue extends string | number, IsMulti extends boolean>({
+const SelectPicker = <OptionValue, IsMulti extends boolean>({
     error,
     icon,
     helperText,

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

@@ -173,12 +173,10 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
     )
 }
 
-export const SelectPickerMenuList = <OptionValue extends string | number>(
-    props: MenuListProps<SelectPickerOptionType<OptionValue>>,
-) => {
+export const SelectPickerMenuList = <OptionValue,>(props: MenuListProps<SelectPickerOptionType<OptionValue>>) => {
     const {
         children,
-        selectProps: { inputValue, value, renderMenuListFooter, shouldRenderCustomOptions, renderCustomOptions },
+        selectProps: { inputValue, renderMenuListFooter, shouldRenderCustomOptions, renderCustomOptions },
     } = props
 
     return (
@@ -188,8 +186,7 @@ export const SelectPickerMenuList = <OptionValue extends string | number>(
             {/* Added to the bottom of menu list to prevent from hiding when the menu is opened close to the bottom of the screen */}
             {!shouldRenderCustomOptions && renderMenuListFooter && (
                 <div className="dc__position-sticky dc__bottom-0 dc__bottom-radius-4 bcn-0 dc__zi-2">
-                    {/* Passing down value as a prop to ensure that the menu list is not re-rendered and scrolled to top on click */}
-                    {renderMenuListFooter(value)}
+                    {renderMenuListFooter()}
                 </div>
             )}
         </components.MenuList>

src/Shared/Components/SelectPicker/common.tsx

@@ -49,7 +49,7 @@ declare module 'react-select/base' {
         /**
          * Render function for the footer at the bottom of menu list. It is sticky by default
          */
-        renderMenuListFooter?: (selectedOptions: SelectProps<string | number, IsMulti>['value']) => ReactNode
+        renderMenuListFooter?: () => ReactNode
         /**
          * If true, custom options are rendered in the menuList component of react select
          *