Merge pull request #399 from devtron-labs/chore/sync-kubecon-2024

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.2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -14,7 +14,7 @@ interface ButtonTab {
     href?: never
 }
 
-interface NavLinkTab {
+interface NavLinkTab extends Pick<NavLinkProps, 'isActive'> {
     /**
      * The URL of the nav link.
      */
@@ -23,47 +23,45 @@ interface NavLinkTab {
      * The callback function to handle click events on the nav link.
      */
     onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void
-    isActive?: never
 }
 
 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'> {
+export interface CollapsibleListConfig<TabType extends TabOptions = 'navLink'> {
     /**
      * The unique identifier for the collapsible list.
      */
@@ -108,7 +106,7 @@ export interface CollapsibleListConfig<TabType extends 'button' | 'navLink'> {
     isExpanded?: boolean
 }
 
-export interface CollapsibleListProps<TabType extends TabOptions> {
+export interface CollapsibleListProps<TabType extends TabOptions = 'navLink'> {
     /**
      * An array of collapsible list configurations.
      */