fix: typing for collapsible list

Author: eshankvaish

package-lock.json

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

package.json

@@ -2,19 +2,15 @@ import React from 'react'
 import { TippyProps } from '@tippyjs/react'
 import { NavLinkProps } from 'react-router-dom'
 
-interface ButtonTab {
-    /**
-     * Is tab active ( for button tab )
-     */
-    isActive: boolean
+interface ButtonTab extends Required<Pick<NavLinkProps, 'isActive'>> {
     /**
      * The callback function to handle click events on the button.
      */
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
     href?: never
 }
 
-interface NavLinkTab {
+interface NavLinkTab extends Pick<NavLinkProps, 'isActive'> {
     /**
      * The URL of the nav link.
      */
@@ -30,38 +26,37 @@ export type TabOptions = 'button' | 'navLink'
 
 type ConditionalTabType<TabType extends TabOptions> = TabType extends 'button' ? ButtonTab : NavLinkTab
 
-export type CollapsibleListItem<TabType extends TabOptions> = Pick<NavLinkProps, 'isActive'> &
-    ConditionalTabType<TabType> & {
-        /**
-         * The title of the list item.
-         */
-        title: string
+export type CollapsibleListItem<TabType extends TabOptions = 'navLink'> = ConditionalTabType<TabType> & {
+    /**
+     * The title of the list item.
+     */
+    title: string
+    /**
+     * The subtitle of the list item.
+     */
+    subtitle?: string
+    /**
+     * If true, the title will be rendered with line-through.
+     */
+    strikeThrough?: boolean
+    /**
+     * Configuration for the icon.
+     */
+    iconConfig?: {
         /**
-         * The subtitle of the list item.
+         * A React component representing an icon to be displayed with the list item.
          */
-        subtitle?: string
+        Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
         /**
-         * If true, the title will be rendered with line-through.
+         * Properties for the icon component.
          */
-        strikeThrough?: boolean
+        props?: React.SVGProps<SVGSVGElement>
         /**
-         * Configuration for the icon.
+         * Properties for the tooltip component of the icon.
          */
-        iconConfig?: {
-            /**
-             * A React component representing an icon to be displayed with the list item.
-             */
-            Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
-            /**
-             * Properties for the icon component.
-             */
-            props?: React.SVGProps<SVGSVGElement>
-            /**
-             * Properties for the tooltip component of the icon.
-             */
-            tooltipProps?: TippyProps
-        }
+        tooltipProps?: TippyProps
     }
+}
 
 export interface CollapsibleListConfig<TabType extends 'button' | 'navLink'> {
     /**